Question

我通过建立一个小博客来学习angular2。我使用angular-cli和typescript 2。

我有一个小组件的问题。当你在文章页面时，我想要一个＆＃34;上一个＆＃34;和＆＃34;下一步＆＃34;链接到其他文章。

我的路径是这样的： 文章/：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以阻止在routerLink可用之前创建nextArticle：

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

或

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

Angular2 [routerLink]构造失败

1 个答案: