javascript - Angular2: Injecting a service - Stack Overflow

admin管理员组

文章数量:1332638

I started to learn Angular2, but.. I tried to create a service and import in my poment, but I get this error:

error TS2339: Property 'mentService' does not exist on type 'CommentsComponent'.

ment.service.ts

import { Injectable } from '@angular/core';


@Injectable()
export class CommentService {
    testfunction() {
        return 'valoare';
    }
}

mentsponent.ts

import { Component, OnInit } from '@angular/core';
import { CommentService } from '../services/ment.service';

@Component({
  template: 'dadada',
  providers: [CommentService]
})

export class CommentsComponent implements OnInit {
    construct(mentService: CommentService) {
    }

    ngOnInit() { 
        console.log( thismentService.testfunction() ); 
    }
}

appponent.ts

import { Component } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router';

@Component({
  selector: '[web-application]',
  templateUrl: 'template/home',
  directives: [ROUTER_DIRECTIVES]
})
export class AppComponent { }

app.routes.ts

import { provideRouter, RouterConfig } from '@angular/router';
import { CommentsComponent } from './ponents/mentsponent';
import { HomeComponent } from './ponents/homeponent';

const routes: RouterConfig = [
  { path: '', ponent: HomeComponent },
  { path: 'ments', ponent: CommentsComponent }
];

export const appRouterProviders = [
  provideRouter(routes)
];

main.ts

import { bootstrap }    from '@angular/platform-browser-dynamic';
import { AppComponent } from './ponents/appponent';
import { appRouterProviders } from './app.routes';
import { CommentService } from './services/ment.service'

bootstrap(AppComponent, [
  appRouterProviders,
  CommentService
])
.catch(err => console.error(err));

Somebody have an idea why I can't inject the service?

I started to learn Angular2, but.. I tried to create a service and import in my poment, but I get this error:

error TS2339: Property 'mentService' does not exist on type 'CommentsComponent'.

ment.service.ts

import { Injectable } from '@angular/core';


@Injectable()
export class CommentService {
    testfunction() {
        return 'valoare';
    }
}

ments.ponent.ts

import { Component, OnInit } from '@angular/core';
import { CommentService } from '../services/ment.service';

@Component({
  template: 'dadada',
  providers: [CommentService]
})

export class CommentsComponent implements OnInit {
    construct(mentService: CommentService) {
    }

    ngOnInit() { 
        console.log( this.mentService.testfunction() ); 
    }
}

app.ponent.ts

import { Component } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router';

@Component({
  selector: '[web-application]',
  templateUrl: 'template/home',
  directives: [ROUTER_DIRECTIVES]
})
export class AppComponent { }

app.routes.ts

import { provideRouter, RouterConfig } from '@angular/router';
import { CommentsComponent } from './ponents/ments.ponent';
import { HomeComponent } from './ponents/home.ponent';

const routes: RouterConfig = [
  { path: '', ponent: HomeComponent },
  { path: 'ments', ponent: CommentsComponent }
];

export const appRouterProviders = [
  provideRouter(routes)
];

main.ts

import { bootstrap }    from '@angular/platform-browser-dynamic';
import { AppComponent } from './ponents/app.ponent';
import { appRouterProviders } from './app.routes';
import { CommentService } from './services/ment.service'

bootstrap(AppComponent, [
  appRouterProviders,
  CommentService
])
.catch(err => console.error(err));

Somebody have an idea why I can't inject the service?

• javascript
• service
• angular
• inject

Share Improve this question Follow edited Aug 5, 2016 at 14:33 Isabel Inc 1,89922 gold badges2121 silver badges2828 bronze badges asked Aug 5, 2016 at 14:27 George HulpoiGeorge Hulpoi 66711 gold badge1010 silver badges2525 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 7

export class CommentsComponent implements OnInit {
    construct(mentService: CommentService) {

should be

export class CommentsComponent implements OnInit {
    constructor(private /* or public */ mentService: CommentService) {

Adding private or public makes it an instance property, otherwise it's just a parameter.

you should provide access modifier when you inject a dependency . Use this

export class CommentsComponent implements OnInit {
    constructor(private mentService: CommentService) {
}

In typescript, it is possible to declare and instantiate properties implicitly or explicitly.

Implicit declaration pass properties to the constructor function by adding access modifier to each property and not implement anything inside the constructor.

constructor(private mentService:CommentService) {}

The class will have a property called mentService with private access modifier.

Explicit declaration and initialization Declare class properties and then initialize them in the constructor with the values passed to the constructor.

class Component {
  private mentService: CommentService;
 
  constructor(entService: CommentService) {
    this.mentService = mentService;
  }
}

So what you did was you passed a param to the constructor and didn't use it at all plus the class has no declared property. so the class won't have mentService property at all. You should either add an access modifier to the parameter of the constructor and declare it implicitly or declare it yourself in the class as class property and initialize it explicitly.

本文标签： javascriptAngular2 Injecting a serviceStack Overflow