Angular 2: 指令订阅一个服务的 Observables

Question

如何让指令订阅服务，以便在服务更新时，指令也会更新。因此，例如，假设我希望视图对权限指令做出反应，而不是在某些内容发生变化时将每个组件的数据提交到指令中，指令将等到新的权限更新被推送到它以反映更改从服务而不是输入更改。因此权限指令可以自行管理，而不需要每个组件都必须管理注入其中的数据。

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

以及一些订阅服务的指令。

Answer 1

您可以在 Service 中使用 RxJs Subject 并在 Directive 中使用 subscribe。

每次数据更改时，Subject 将发送新数据给订阅此 Subject 的 Directive。

例如，在您的服务中：

...
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();
}
...

Answer 2

您可以将 ngOnChanges 与 SimpleChanges 参数一起使用，比较更改后输入值的新值和先前值

@Input() public hasPermission: any; 

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

Angular 2: 指令订阅一个服务的 Observables

Angular 2: Directive Subscribe To Observables of a service

angular

rxjs

angular2-directives

angular2-observables