Сервис Angular 2 не внедряется в компонент

У меня есть служба, определенная в моем приложении Angular2 (2.0.0-beta.0). Это что-то вроде этого:

import {Injectable} from "angular2/core";

@Injectable()
export class MyService {
    constructor() {

    }

    getSomething() {
        return 'something';
    }
}

Я перечислил его в моей функции bootstrap() в главном файле приложения, чтобы он был доступен для моего кода в целом:

bootstrap(App, [MyService, SomeOtherService, ROUTER_DIRECTIVES[);

Иногда я не могу использовать сервис в компоненте, хотя у меня есть что-то вроде myService:MyService в компоненте constructor() функция, как это:

import {MyService} from '../services/my.service';

@Component({
    selector: 'my-component',
    directives: [],
    providers: [],
    pipes: [],
    template: `
    <div><button (click)="doStuff()">Click Me!</button></div>
    `
})
export MyComponent {
    constructor(myService:MyService) {} // note the private keyword

    doStuff() {
        return this.myService.getSomething();
    }
}

В других местах работает нормально. В местах, где это не работает, я получаю сообщение, например, если я пытаюсь получить к нему доступ:

EXCEPTION: TypeError: Cannot read property 'getSomething' of undefined

Это в основном означает, что услуга не была введена.

Что заставляет это не быть введенным?

2 ответа

Решение

Проблема в том, что кажется, что внедрение зависимости не сработает, если у вас в конструкторе не будут введенные объекты, помеченные как private или же public,

Добавление любой из этих двух вещей перед внедрением сервиса в конструкторе моего компонента сделало это нормально:

import {MyService} from '../services/my.service';

@Component({
    selector: 'my-component',
    directives: [],
    providers: [],
    pipes: [],
    template: `
    <div><button (click)="doStuff()">Click Me!</button></div>
    `
})
export MyComponent {
    constructor(private myService:MyService) {} // note the private keyword

    doStuff() {
        return this.myService.getSomething();
    }
}

Такое поведение абсолютно нормально.

В методе конструктора компонента, когда вы не добавляете ключевое слово private или public, переменная myService оценивается как локальная переменная, поэтому она уничтожается в конце вызова метода.

Когда вы добавляете приватное или общедоступное ключевое слово, TypeScript добавит переменную в свойство класса, чтобы вы могли позже вызвать свойство с этим ключевым словом.

constructor(myService: MyService) {
  alert(myService.getSomething());
  // This will works because 'myService', is declared as an argument
  // of the 'constructor' method.
}

doStuff() {
  return (this.myService.getSomething());
  // This will not works because 'myService' variable is a local variable
  // of the 'constructor' method, so it's not defined here.
}
Другие вопросы по тегам