参数化路由中的空值Angular 5

Question

TypeError：无法读取null的属性'outlets'

我，使用参数化路由传递每个项目的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]是因为异步调用。当它从服务器获取数据时，每件事情都是完美的。

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

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

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. 在*ngIf="_genericViewModel.data"标签中使用<a>。
2. 使用async中的routerLink管道如下： [routerLink]="['/item', _genericViewModel.data?.question.questionId | async]"
3. 使用resolver。在路由到特定URL之前，您可以通过该方法运行数据提取等逻辑。使用官方docs了解更多信息。

虽然我不确定第二种选择，但请尝试一下，让我知道。