angular - 在 Angular 2 中使用主题

Question

我的ma​​in.service.ts

@Injectable()
export class AppService{
  private mainSource = new Subject<boolean>();
  main$ = this.mainSource.asObservable();
}

我的app.component.ts

constructor(private appService: AppService){
  this.appService.main$.subscribe(
  working => {this.appService.main$(false);}
}

ngOnInit(){
    if (this.appService.main$){alert("Tio");}
}

我的 app.component 返回一个 Cannot invoke an expression which type lacks a call signature 错误。无论条件是否实际满足，我的 OnInit 警报都会触发。在这种情况下，他们没有。

订阅对我来说仍然很陌生，所以我不清楚我应该在这里做什么。我想将我的 main$ 设置为 false 的初始值。当我的页面加载时，我希望它仅在为真时发出警报。

Answer 1

如果你想改变一个主题的值，最好为它创建一个单独的方法。在这种情况下，我添加了一个 setWorking 方法来更改 Subject 的 bool 值。

接下来，组件订阅 Subject(作为 Observable 返回)并监听值的变化。

如果值发生变化，将调用 subscribe block 中的回调函数。

服务

@Injectable()
export class AppService{
  private mainSource = new Subject<boolean>();
  main$ = this.mainSource.asObservable();

  setWorking(isWorking: boolean) {
    this.mainSource.next(isWorking);
  }
}

组件

private subscription: Subscription

constructor(private appService: AppService){ }

ngOnInit(){

  this.appService.setWorking(false);

  this.subscription = this.appService.main$.subscribe(isWorking => {
    if (isWorking) { alert("Tio"); }
  }
}

ngOnDestroy() {
    this.subscription.unsubscribe();
}

最后，您可以在订阅后添加一个 this.appService.setWorking(true); 函数调用，以显示警报。

PS:我添加了 ngOnDestroy 部分，因为在离开时订阅不会自动清除，因此会造成内存泄漏。您需要从 rxjs/Subscription 导入 Subscription。