参数化路线Angular 5中的空值

Question

TypeError: Cannot read property 'outlets' of null

我，正在使用参数化路由来传递每个项目的 id。该路线运行良好。

 { path: 'item/:id', component: SingleItemComponent }

<a class="mdl-button mdl-js-button mdl-button--icon" [routerLink]="['/item', _genericViewModel.data?.question.questionId]">

因为，在第一次加载页面时，id 是空的，因为数据不是从服务器获取的。我得到 null _genericViewModel.data?.question.questionId] 的原因是因为异步调用。当它从服务器获取数据时，一切正常。

如何，我可以在组件的初始加载时检查 null 条件。

这是从服务器获取数据的代码

constructor(private route: ActivatedRoute, genericViewModel: GenericResponseObject<SingleItemViewModel>, singleItemService: GenericHttpClientService,) {
        this._genericViewModel = genericViewModel;
        this._singleItemService = singleItemService;
        this.route.params.subscribe(params => this.getHomeItemHttpCall(params.id));
    }

private getHomeItemHttpCall(id: string): void {

        this._singleItemService.GenericHttpGet<GenericResponseObject<SingleItemViewModel>>(this.GetHomeItemUrl + id).subscribe(data => {
            if (data.isSuccess) {
                this._genericViewModel.data = data.data;
            }

        }, error => {
            console.log(error);
        });
    }

这是错误屏幕截图

Answer 1

据我所知，你有 3 种方法可以解决这个问题：

1. 在<a> 标签中使用*ngIf="_genericViewModel.data"。

2. 使用routerLink 中的async 管道如下：

   [routerLink]="['/item', _genericViewModel.data?.question.questionId | async]"

3. 使用resolver。它是一种方法，您可以在路由到特定 URL 之前运行一些逻辑，例如数据获取。使用官方docs了解更多信息。

虽然我不确定第二个选项，但请尝试一下并告诉我。