Question

我有一个订阅了一个observable的指令（@Directive）。发出事件时，该指令会修改装饰视图的样式（CSS）。

这不起作用，即虽然我的代码被调用但CSS没有被修改。如果我在指令的构造函数中修改了装饰组件的CSS，它就可以工作。

顺便说一下，我试图在指令的构造函数和ngOnInit（）中订阅observable，但没有成功。

这是指令代码：

@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

<强> ANSWER

我注意到（感谢@Thierry为您的样本）我有＆＃39;提供商：[FooService]，＆＃39;这使得该指令不使用在引导程序中注册的单例FooService（如您所述）。解决方案是从提供程序中删除FooService。

订阅Observable的Angular2指令无法刷新视图

2 个答案: