时间戳

首页 > 解决方案 > 异步管道未订阅 Observable Angular

angular - 异步管道未订阅 Observable Angular

问题描述

在 Angular (v12) 中，我有以下组件（使用虚拟变量名称）：

export class DataDetailsComponent {
    data$: Observable<MyDataModel>;

    constructor(dataService: DataService, route: ActivatedRoute, private router: Router) {
        this.data$ =
            combineLatest([dataService.getDataObservable(), router.events])
                .pipe(
                    filter(([,event]) => event instanceof ActivationEnd),
                    tap(([data, event]) => console.log((<ActivationEnd>event).snapshot.queryParams['id'])),
                    map(([data, event]) => data.filter(c => c.id === (<ActivationEnd>event).snapshot.queryParams['id'])[0]),
                    tap(dataItem => console.log(dataItem))
                );
        this.data$.subscribe(); // console.logs don't work without this
    }
}

及其模板：

<div *ngIf="data$ | async as data; else loading">
    <img [src]="data.url" [alt]="data.name">
</div>
<ng-template #loading>Loading...</ng-template>

数据没有被渲染，如果我实际上没有订阅data$. 另一方面，当我做 place 时this.data$.subscribe();，控制台得到正确的输出，但视图仍然是空的（挂在Loading...上）。

谁能解释发生了什么？

标签： angularrxjsangular-routerangular2-observablesasync-pipe

解决方案

最后，是路由器事件没有让 observable 完成。显然，如果我将导航从模板移动到 .ts 并订阅ActivatedRoute.params而不是Router.events.

所以，父组件得到：

navigateToDetails(id: string): void {
    this.router.navigate(['/myRoute', id]);
}

而不是routerLink在模板中使用：

<a [routerLink]="['/myRoute']" [queryParams]="{id: item.id}">

然后，DataDetailsComponent我可以这样做：

constructor(dataService: DataService, route: ActivatedRoute) {
        this.data$ =
            combineLatest([dataService.getDataObservable(), route.params])
                .pipe(map(([data, params]) => data.filter(c => c.id === params['id'])[0]));
    }

在这一点上，原因超出了我的范围。

推荐阅读