angular 2 rxjs 订阅未执行的可观察代码答案

【问题标题】：angular 2 rxjs subscribe to observable code not executingangular 2 rxjs 订阅未执行的可观察代码
【发布时间】：2021-12-30 11:34:51
【问题描述】：

我有一个使用 rxjs 的 Angular 应用程序来订阅从主题实例化的可观察对象。

下面是我的 app.service.ts

private subjectGreeting: Subject<Greeting>;  //Subject declared
resGreeting: Observable<Greeting>;  //Observable declared

authenticate(credentials, callback) {
const headers = new HttpHeaders({ Authorization : 'Basic ' + btoa(credentials.username + ':' + credentials.password)
});

return this.http.get<Greeting>('http://localhost:8080/user', {headers},).subscribe(response => {
    console.log('Inside app service authenticate');
    if (response) {
        this.subjectGreeting = new Subject(); //subjectGreeting being instantiated
        this.resGreeting = this.subjectGreeting.asObservable();  //resGreeting being assigned asObservable()

        this.subjectGreeting.next(response);   //next response being assigned to subjectGreeting
    } 
    callback();
});

在组件方面，我有一个登录组件，它从上述服务调用身份验证功能：

以下是组件代码：

    login() {
    console.log('inside login');
    this.app.authenticate(this.credentials, () => {
      this.app.authenticated = true;
      this.childComponent.refreshFromParent();  //refresh child component (do a subscription after authentication)
      // Redirect the user
      this.router.navigate(['../home']);
    } );
    
    return false;
  }

  refreshFromParent(): void{
    console.log('home component refresh from parent'); 
    if(this.app.resGreeting){
      this.subscriptionGreeting = this.app.resGreeting.subscribe(r => { ***//This subscription code is not executing despite the fact that it is being called after authentication***
        console.log('inside greeting subscription');
        if(r){
          this.greeting = r;
          this.authenticated = true;
        }
      });
    }
  }

最后，组件的html如下：

<a routerLink="./" routerLinkActive="active"
    [routerLinkActiveOptions]="{ exact: true }">Welcome Home!</a>
<div [hidden]="(authenticated)">
    <p *ngIf="greeting">The ID is {{greeting.id}}</p>
    <p *ngIf="greeting">The content is {{greeting.content}}</p>
</div>
<div [hidden]="!(authenticated)">
    <p>Login to see your greeting</p>
</div>

<router-outlet></router-outlet>

由于某种原因，我没有得到任何输出 {{greeting.id}} 和 {{greeding.content}}

【问题讨论】：

这个条件“this.app.resGreeting”是否返回 true？
是的，我也删除了条件，仍然没有

标签： angular rxjs

【解决方案1】：

使用BehaviorSubject 而不是Subject。

private subjectGreeting: BehaviorSubject<Greeting> = new BehaviorSubject<Greeting>(null);
resGreeting: Observable<Greeting> = this.subjectGreeting.asObservable();

订阅Subject 将在订阅后收到下一个值。因此，如果您在调用 this.subjectGreeting.next(..) 之后订阅了 Subject，则订阅不会运行到 next，因为您订阅了之后。

通过切换到BehaviorSubject，订阅时您总能获得最新消息。

https://devsuhas.com/2019/12/09/difference-between-subject-and-behaviour-subject-in-rxjs/

【讨论】：