Angular 2:Directive订阅服务的Observable

时间:2018-04-25 13:36:30

标签: angular rxjs angular2-directives angular2-observables

如何使用指令订阅服务,以便在服务更新时,指令更新。因此,例如,假设我希望视图从权限指令作出反应,而不是在某些内容发生更改时将每个组件的数据提交到指令中,该指令将等到推送新的权限更新以反映更改从服务而不是输入更改。因此权限指令管理自己,而不需要每个组件都必须管理注入其中的数据。

 <div *hasPermission="'admin_user_reset'"></div>

一些订阅服务的指令。

2 个答案:

答案 0 :(得分:1)

您可以在Servicesubscribe中使用RxJs Subject进入Directive

每次数据发生变化时,Subject都会向您的Directive发送新订阅此Subject的数据

例如,在服务

...
private subject = new Subject<any>();

changePermission(permission: string) {
    this.subject.next({ text: permission });
}

getMessage(): Observable<any> {
    return this.subject.asObservable();
}
...

指令

...
permission: any;
subscription: Subscription;

constructor(private myService: MyService) {
    // subscribe to permission changes
    this.subscription = this.myService.getMessage().subscribe(permission => { this.permission = permission; });
}

ngOnDestroy() {
    // unsubscribe to ensure no memory leaks
    this.subscription.unsubscribe();
}
...

答案 1 :(得分:0)

你可以使用带有SimpleChanges参数的ngOnChanges,比较更改后输入值的新值和先前值

@Input() public hasPermission: any; 

ngOnChanges(changes: SimpleChanges){
  if(changes.hasPermission){
    // add your control here
  }
}`