angular 2 个 rxjs 订阅了未执行的可观察代码

Question

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

下面是我的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;
  }

login() 函数还调用 refreshFromParent()，如下所示：

  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}}

Answer 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/

angular 2 个 rxjs 订阅了未执行的可观察代码

angular 2 rxjs subscribe to observable code not executing

rxjs

angular