中继器内的RouterLink angular 2答案

【问题标题】：RouterLink inside a repeater angular 2中继器内的RouterLink angular 2
【发布时间】：2016-12-16 09:08:35
【问题描述】：

routerLink 可以启用config 提供的必要导航路线。

如果执行如下操作，它可以正常工作：

<ul class="nav">
    <li class="nav-item">
        <a class="nav-link" href="#" [routerLink]="['/home']">Home</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#" [routerLink]="['/about']">About</a>
    </li>
</ul>

但是在 *ngFor 中继器中使用时会失败，就像这样

<ul class="nav">
    <li class="nav-item" *ngFor="let item of menu">
        <a class="nav-link" href="#" [routerLink]="['{{item.link}}']">{{item.name}}</a>
    </li>
</ul>

我已经在Google 上进行了足够多的搜索，但找不到令人满意的答案。

感谢任何帮助

【问题讨论】：

标签： javascript angular typescript web angular2-routing

【解决方案1】：

你不需要'{{item.link}}'

仅使用item.link，不使用'' 和{{}}

<ul class="nav">
     <li class="nav-item" *ngFor="let item of menu">
         <a class="nav-link" href="#" [routerLink]="[item.link]">{{item.name}}</a>
     </li>
</ul>

如果你想连接routerLink

你可以的

[routerLink]="['./page/' + item.id]"

【讨论】：

谢谢！像魅力一样工作
@Arun Kumar 不要忘记接受一个适合你的答案。所以其他人可以很容易地找到它。
有机会添加一个为什么吗？你不需要……因为……？
@ShaneCourtrille 因为 Angular 已经评估了 angular 标签属性的内容。 {{ }} 用于角度属性之外，例如标签之间。如果它不是标准的 html 元素属性，而是作为 angular 的一部分添加的，那么你已经是黄金了。