Директива Angular2, подписанная на Observable, не может обновить представление

Question

У меня есть директива (@Directive), которая подписана на наблюдаемую. Когда событие испускается, директива изменяет стиль (CSS) декорированного представления.

Это не работает, т. Е. CSS не изменяется, хотя мой код вызывается. Если я модифицирую CSS декорированного компонента в конструкторе директивы, он работает.

Кстати, я попытался подписаться на наблюдаемые в конструкторе директивы и в ngOnInit(), но безуспешно.

Это код директивы:

@Directive({ 
    providers: [FooService], 
    selector: '[foo]', 
}) 
export class FooDirective { 

constructor(private _renderer: Renderer, private _el: ElementRef, private _fooService: FooService) { 

    // modify the CSS style when the directive is initialized 
    this._renderer.setElementStyle(this._el, 'color', 'yellow'); // this works 

    _fooService.subscribe(myevent => { 
     // modify the CSS style on an event 
     this._renderer.setElementStyle(this._el, 'color', 'yellow'); // this does not work (although it is called) 
    }); 
    } 
} 

Answer 1

Вот рабочий пример: https://plnkr.co/edit/ELWlaG8Zkdq4BDvo4al4?p=preview. Ваш код кажется правильным ...

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

import {bootstrap} from 'angular2/platform/browser'; 
import {AppComponent} from './app.component'; 
import {TestService} from './service'; 

bootstrap(AppComponent, [ TestService ]); 

Является ли обратный вызов определяется в subscribe метод вызывается, когда событие вызывается?

Answer 2

ОТВЕТ

я заметил (спасибо @Thierry для вашего образца), что у меня есть «провайдеры: [FooService],» что делает директиву не использовать одноплодную FooService зарегистрированную в загрузчике (как вы говорите). Решение заключалось в том, чтобы удалить FooService у поставщиков.