Внедрение поставщиков услуг в Angular 2.0

В объяснении учебника AngularJS 2.0 Heroes говорится, что если дочерний компонент включает службу в свой список поставщиков @Component, то Angular создаст отдельный экземпляр этой службы, характерный для дочернего элемента. Чего я не понимаю, так это того, что бы вы сделали, если бы иногда вы хотели использовать дочерний компонент независимо, а иногда в родительском компоненте. Это кажется жестким ограничением. Я только что играл с Angular 2.0, поэтому, скорее всего, я что-то неправильно понял.

Вот объяснение с сайта Angular.io из раздела «Услуги» учебника по героям.

Приложение: Слежка за родительской службой

Ранее мы заявляли, что если мы внедрили родительский AppComponent HeroService в HeroDetailComponent, мы не должны добавлять массив поставщиков в метаданные HeroDetailComponent.

Почему? Потому что это говорит Angular создать новый экземпляр HeroService на уровне HeroDetailComponent. HeroDetailComponent не нужен собственный экземпляр службы; ему нужен экземпляр службы своего родителя. Добавление массива provider создает новый экземпляр службы, который скрывает родительский экземпляр.

Тщательно продумайте, где и когда регистрировать провайдера. Поймите масштаб этой регистрации. Будьте осторожны, чтобы не создать новый экземпляр службы на неправильном уровне.

Вот ссылка на эту страницу пришло из, чтобы поместить это в контекст.


angular angular2-services
person Darryl    schedule 25.01.2016    source источник

Ответы (1)


arrow_upward
11
arrow_downward

Если вы хотите, чтобы компонент имел собственный экземпляр службы и в то же время экземпляр родительской службы, вам необходимо взглянуть на @SkipSelf()

Рассмотрим следующий код

class Service {
    someProp = 'Default value';
}

@Component({
  providers : [Service] // Child's instance
})
class Child {
  constructor(
    @SkipSelf() parentSvc: Service, 
    svc: Service
    ) {
        console.log(pSvc.someProp); // Prints 'Parents instance'
        console.log(svc.someProp);  // Prints 'Default value'
    }
}

@Component({
  providers : [Service] // Parent's instance
})
class Parent {
  constructor(svc: Service) {
    svc.someProp = 'Parent instance';
  }
}

С помощью @SkipSelf() мы говорим компоненту начать разрешение зависимостей от родительского инжектора (я думаю, имя SkipSelf говорит о многом).

Вы можете узнать больше о видимости в Хост и видимость во внедрении зависимостей Angular 2 от @PascalPrecht.

Проверьте этот plnkr на рабочем примере.

person Eric Martinez    schedule 25.01.2016
comment
Спасибо! Я подумал, что есть что-то, чего я еще не видел. - person Darryl; 25.01.2016
comment
Ссылка @SkipSelf выше — 404 - person CNSKnight; 04.11.2016