Question

我的 main.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 whose type lacks a call signature错误。无论条件是否真正得到满足，我的OnInit警报都会触发。在这种情况下，他们没有。

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

Answer 1

如果要更改主题的值，最好为其创建单独的方法。在这种情况下，我添加了setWorking方法来更改Subject的布尔值。

接下来，组件订阅Subject（作为Observable返回）并侦听对值的更改。

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

<强>服务

@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部分，因为导航时不会自动清除订阅，因此会造成内存泄漏。您需要从Subscription导入rxjs/Subscription。

Answer 2

问题是，您在构造函数中订阅。所以你不知道结果何时到来，因为它是异步的。与此同时，构造函数立即完成，并调用OnInit。

我不知道您的服务是怎样的，但如果您还订阅了OnInit方法中的事件，那将是最好的。

使用Angular 2中的主题

2 个答案: