javascript - Angular2 [routerLink] 构建失败

Question

我正在通过建立一个小博客来学习 Angular2。我将 angular-cli 与 typescript 2 一起使用。

我遇到了一个小组件的问题。当您进入文章页面时，我需要“上一篇”和“下一篇”链接来访问其他文章。

我的路径是这样的:article/:id/:slug

在我的类组件中:到目前为止我的代码(以及下面的我的问题):

  getUrlParams() {
    this.activatedRoute.params.subscribe( (param) => {
        this.loadPrevArticle(param);
    })
  }

  loadPrevArticle(param){
      let id = Number(param['id']); // Converts the original string to number

      return this.myService.getArticles().subscribe((data) => {
         // some stuffs to get the article object I want, actually working :)
      });
  }

我的服务如下所示:

getArticles() {
    return this.http.get('my_api_link').map(
        (res: Response) => res.json()
    );
}

我收到了数据，服务运行正常，但是...

我的问题:

当我在 ngOnInit() 中调用 this.getUrlParams() 方法时，模板中的 [routerLink] 显示错误。未找到该对象。

[routerLink]="['/article', nextArticle.id, nextArticle.slug]

但是当我将方法移到类构造函数中时，它就起作用了。我知道这不是一个好的做法，我更愿意移动 ngOnInit() 中的所有内容

有什么想法可以做到这一点吗？我现在有点迷失...

解决方案:

添加 html 元素:

*ngIf="nextArticle" [routerLink]="['/article', nextArticle.id, nextArticle.slug]"

它将在渲染之前等待数据:) 谢谢 Gunter

Answer 1

您可以添加一个 *ngIf 以防止在 nextArticle 可用之前创建 routerLink:

*ngIf="nextArticle" [routerLink]="['/article', nextArticle.id, nextArticle.slug]"

或

[routerLink]="nextArticle ? ['/article', nextArticle.id, nextArticle.slug] : null"