我想将一些数据从一个模块传递到另一个模块.为此,我使用主语.我创建了以下主题:

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class SelectedClusterService {

  constructor() { }

  public selectedClusterName = new Subject<string>();

}

我从"oneComponent"通过上面的服务传递一些数据,然后重定向到"anotherComponent":

this.selectedClusterService.selectedClusterName.next(cluster_name);

并将数据提取到"另一个组件",如下所示:

this.selectedClusterService.selectedClusterName.subscribe(res => {
  this.selectedCluster = res;
  console.log("this.selectedCluster", this.selectedCluster);
});

这工作得很好,我正在将数据发送给"另一个组件".但在"另一个组件"中,我使用的是forkJoin.我只想在从forkJoin获得数据之后才从Subject获得数据. 我试着这样做:

   ngOnInit() {
    forkJoin([
      this.dataService.getUpgradeAppList(),
      this.dataService.getClusterList()
    ]).subscribe((data: any) => {
      console.log("forkJoin :: ngOnInit ::", data);
      this.appList = data[0].apps;
      this.clusterList = data[1];

    }); 
    this.selectedClusterService.selectedClusterName.subscribe(res => {
      this.selectedCluster = res;
      console.log("this.selectedCluster", this.selectedCluster);
    });
  }

我已经try 了ngAfterViewInitngAfterContentChecked和changeDetect,我也try 使用setTimeout,但都不起作用.我总是先获取主题数据,然后再获取forkJoin数据. 如何才能先获取forkJoin,然后再获取主题数据? 任何帮助我们都会很感激.

推荐答案

首先,当您使用PDMC实体时,无法保证在组件中获取数据的顺序.我会使用BehaviorSubject而不是Subject来保证你从其他组件接收数据.

您的服务将像:

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class SelectedClusterService {

  constructor() { }

  public readonly selectedClusterName = new BehaviorSubject<string | undefined>(undefined);

}

您的组件:

ngOnInit() {
    forkJoin([
      this.dataService.getUpgradeAppList(),
      this.dataService.getClusterList()
    ]).
    pipe(
      tap((data: any) => {
        console.log("forkJoin :: ngOnInit ::", data);
        this.appList = data[0].apps;
        this.clusterList = data[1];
      }),
      switchMap(() => this.selectedClusterService.selectedClusterName),
      filter(res => res !== undefined)
    ).subscribe(res => {
      this.selectedCluster = res;
      console.log("this.selectedCluster", this.selectedCluster);
    });     
  }

anotherComponent中,您可以使用switchMap运算符开始接收来自oneComponent的数据,使用filter运算符来忽略我们设置为undefinedBehaviorSubject中的初始值.

Angular相关问答推荐

他们如何删除Clarity中的Angular组件包装器元素

我如何更新此Ionic应用程序以解决路由问题?

对子router-outlet 应用主机样式

笔刷Angular 为17

Angular router-outlet 未渲染

带独立零部件的TranslateLoader[Angular 16]

如果Rxjs间隔请求仍在进行,则不应重置,但如果用户更改输入,则应重置

一个接一个的Angular http请求,但只关心第一个

用于 React 的 ngx-extended-pdf-viewer

根据环境变量动态加载Angular templateUrl

为什么初始化值为 1 的BehaviorSubject 不能分配给类型number?

Cypress 12.8.1 无法使用条纹元素 iframe

Angular6:RxJS switchMap 运算符未按预期工作

在父组件的子组件中使用 ng-template

在 angular2 中,如何获取在为 @Input 发送的对象上更改的属性的 onChanges

单选按钮的Angular2 Reactive Forms formControl

使用 Jasmine 和 Karma 对 Angular 进行单元测试,错误:无法绑定到xxx,因为它不是xxxxxx的已知属性.

如何在Angular 4中为数字管道指定语言环境千位分隔符

在Angular 4中以'yyyy-MM-dd'格式获取当前日期

为什么 ngOnInit 被调用两次?