Angular 11-如何使用服务可观察到的数据

Question

我的目标是将可观察到的从父组件传递给其子女，我无法使用“输入”和“输出”来做到这一点，因为包含子组件的组件本身就是用于用户接口的内部库的组成部分。

我有一个父亲组成部分：home.com.ponente.ts

在父级组件中，我调用oninit事件中的服务，然后将其响应存储在“主题”类型中以存储可观察的可观察到，以便我可以订阅儿童组件：

this.tabs = [            
   {id: 'reportsTab', label: 'Files', routerLink: '/reports/1'},
   {id: 'processesTab', label: 'Tasks', routerLink: '/processes/1'},
];
ngOnInit(): void {
    this.processesService.getInfo(id).subscribe(response => { 
        this.processesService.data.next(response);
    });
}

这是proceses.service.ts服务：

export class ProcessesService {
    data: Subject<RestResponse<ScheduleDataOutput[]>> = new Subject();
    
    public getInfo(id: number): Observable<RestResponse<ScheduleDataOutput[]>> {
      let serviceName = "/processes/info";
      if (id) {
        serviceName = serviceName + '?id=' + id;
      }
      return this.service.get<any>(serviceName)
      .pipe(
        tap(_ => this.log('fetched info')),
        catchError(this.handleError<ScheduleDataOutput[]>('getInfo', []))
      );
    }
    
    getData() {
        return this.data.asObservable()
    }
}

在home.component.html文件中，我们具有内部组件，它是使用经典选项卡的UI组件，每个选项卡都是子组件：

<app-menu-tab [tabs]="tabs"></app-menu-tab>

当，当我单击一个选项卡时， ，它具有一个加载子组件的路由器链接，我想通过在家庭成分中获得的响应（可观察到），订阅儿童组件中可观察到的响应，并随着该响应在子部件中绘制datagrid。

当我正确加载子分量组件中获得的响应的屏幕时，如果我正确加载了屏幕的屏幕，则问题是，当我单击选项卡时，datragrids未加载。

这是“报告站”选项卡组件的OnInit事件：

ngOnInit(): void {
    // Here I access
    this.reportsSubscription = this.processesService.getData().subscribe(response => {
        // But within the subscription I do not access.
        console.log("response: ", response)
    });
}

问题是我无法在订阅中访问，在某个时候，可观察到的可观察到的情况是错误的，当我单击“ processEstab”选项卡的子组件时也会发生同样的情况。标签，我无法访问可观察到的订阅：

ngOnInit(): void {
    // Here I access
    this.tasksSubscription = this.processesService.getData().subscribe(response => {
        // But within the subscription I do not access.
        console.log("response: ", response)
    });
}

问题是什么？如果我将可观察到的孩子的组件传递给了孩子，但是当我重新加载页面时，它只能工作并加载数据杂志，但是如果我单击“选项卡”，我会将失去在homecorment中获得的响应，并且数据杂志出现为空。

Answer 1

您需要使用cistionubject（或replaysubject，如果您不需要初始值），而不是普通的主题。

capenionSubject将发出新订户的最新值，而主题不会做到这一点。

为了使订户从主题中获取数据，需要在发出数据之前对其进行订阅。

简而言之，数据属性应该看起来像这样：

data = new BehaviorSubject<RestResponse<ScheduleDataOutput[]>>(null);

或者，如果初始值是多余的，则可以使用replosaySubject而选择：

data = new ReplaySubject<RestResponse<ScheduleDataOutput[]>>(1);