Question

我正在开发angular2应用程序。

我想使用我在承诺中获得的参数。

我一直收到这个错误：

EXCEPTION：未捕获（在承诺中）：错误：http://localhost:5000/js/angular-client/app/components/some/some.component.html:0:7中的错误：c为null normalizeCommands / _loop_1 @ http://localhost:5000/js/angular-client/node_modules/@angular/router/bundles/router.umd.js:2384:15 normalizeCommands @ http://localhost:5000/js/angular-client/node_modules/@angular/router/bundles/router.umd.js:2427:11 createUrlTree @ http://localhost:5000/js/angular-client/node_modules/@angular/router/bundles/router.umd.js:2284:49 Routerhttp：//本地主机：5000/js/angular-client/node_modules/@angular/router/bundles/router.umd.js：3486：18 RouterLinkWithHrefhttp：//本地主机：5000/js/angular-client/node_modules/@angular/router/bundles/router.umd.js：4577：22 RouterLinkWithHrefhttp：//本地主机：5000/js/angular-client/node_modules/@angular/router/bundles/router.umd.js：4570：11 RouterLinkWithHref

这是我的代码：

some.component.ts：

someAnswer: SomeAnswer;
ngOnInit(): void {
    this.sub = this.route.params.subscribe(params => {
        this.getPromise(+params['id']);
    });
}
ngOnDestroy() {
    this.sub.unsubscribe();
}
getPromise(id: number): Promise<SomeAnswer> {
    return this.http.get('/api/'+id+'')
           .toPromise()
           .then(response => this.someAnswer = response.json() as SomeAnswer)
           .catch(this.handleError);
}

some.component.html：

<h2><a [routerLink]="['/url', someAnswer?.id]">banana</a></h2>

所以我的问题是 - 如何将[routerLink]与我从承诺中获得的参数一起使用？

Answer 1

我发现这篇博文回答了我的问题：

http://blog.thoughtram.io/angular/2016/10/10/resolving-route-data-in-angular-2.html

安全导航操作符确保当我们尝试读取null或未定义的对象时，Angular不会抛出任何错误 ...... ...... 在任何地方添加安全导航操作员也会非常累人。除此之外，一些构造不支持该运算符，如NgModel和 RouterLink 指令

所以根据这篇文章，routerLink不支持获取空参数，并且我传递的参数（someAnswer？.id）正在使用安全导航操作符，并且在承诺中收到它 - 当页面加载时它是空的。

有两种解决方案可以解决这个问题：

在加载组件之前解析数据
而不是模板中的routerLink - 使用组件类中的this.router.navigate()

不喜欢强迫我的异步代码变为同步，我决定传递解析选项并选择第二个解决方案，这就是它的外观：

some.component.ts：

goToPage(id:number) {
    this.router.navigate(['/url', id]);
}

some.component.html：

<a (click)="goToPage(someAnswer?.id)">banana</a>

希望这个答案对某人有帮助，

使用来自angular2中的promise的参数的routerLink

1 个答案: