Местный поставщик услуг в угловой трубе

Question

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

Желая проверить это, я написал следующий канал (colorize.pipe.ts):

import { Pipe, Inject } from '@angular/core';

@Pipe({
    name: 'colorize'
})
export class ColorizePipe {
    constructor(@Inject('COLOR') private color) {}

    transform(value: string) {
        return `${this.color} ${value}`;
    }
}

Основной модуль приложения определяет COLOR:

...
@NgModule({
    ...
    providers: [
        ...
        {provide: 'COLOR', useValue: 'red'}
    ],
})
export class AppModule {}

Thisодин переопределяется в dira.directive.ts:

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

@Directive({
    selector: '[dira]',
    providers: [
        {provide: 'COLOR', useValue: 'orange'}
    ]
})
export class DiraDirective {}

И в dirb.directive.ts:

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

@Directive({
    selector: '[dirb]',
    providers: [
        {provide: 'COLOR', useValue: 'blue'}
    ]
})
export class DirbDirective {}

А затем шаблон основного модуля приложения содержит:

<div>
  {{ 'wine' | colorize }}
</div>

<div dira>
  {{ 'sky' | colorize }}
  <div dirb>
    {{ 'ocean' | colorize }}
    <div>
      {{ 'sea' | colorize }}
    </div>
  </div>
</div>

<div>
  {{ 'roses' | colorize }}
</div>

Я ожидал бы получить вывод вроде:

red wine
orange sky
blue ocean
blue sea
red roses

И все же вывод:

red wine
red sky
red ocean
red sea
red roses

Есть что-то, о чем я не знаю?Бесспорно!Какая?Понятия не имею, у меня есть: |