Angular2 [routerLink]构建失败

我正在通过构建一个小博客来学习angular2。我使用打字稿2的角度cli。Angular2 [routerLink]构建失败

我有一个小组件的问题。当您在文章页面中时，我需要一个“上一步”和“下一步”链接来访问其他文章。

我的路径是由这样的：文章/：ID /：塞

在我的类组件：到目前为止我的代码（和我的问题，下面）：

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() 
    ); 
}

我得到了我的d ATAS，服务工作正常但是...

我的问题：

当我打电话给我的this.getUrlParams（）在ngOnInit（）法，[routerLink]在我的模板中显示一个错误。该对象未找到。

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

但是，当我将我的方法移入类构造函数时，它的工作原理。我知道这不是一个很好的做法，我宁愿将所有内容都移动到ngOnInit（）

任何想法如何做到这一点？我有点现在输了...

SOLUTION：

添加HTML元素：

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

它会等待数据呈现前:)谢谢冈特

来源

2017-02-17 KCarnaille

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

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

或

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

来源

2017-02-17 15:35:32

感谢您的回答！我已经尝试过了，但是页面上没有显示任何内容...... – KCarnaille

不确定你的意思是什么“无”。只有具有routerLink的元素才会显示，并且只有'nextArticle'尚不可用。我会用另一种方法更新我的答案。 –

好吧，对不起，我的回答太快了。出于任何原因，您的解决方案实际上可行我昨天试过了，并没有工作......我认为这是一个错误的LOL。再次感谢！ – KCarnaille

Angular2 [routerLink]构建失败

回答

相关问题