Angular 4 [routerLink]无法识别的表达式：

Question

当我使用<a [routerLink]="['/contacts', contact.id]">{{contact.name}}</a>时，为什么浏览器会出现控制台错误。

导航到正确的组件，只有控制台错误。

<a [routerLink]="['/contacts', contact.id]" data-toggle="tab" title="Click to view details">
    {{contact.name}}
</a>

错误图片：

  

未捕获错误：语法错误，无法识别的表达式：/ contacts / d022ed37-c7f1-4883-9cd5-62c59f18d3a1

但是，如果我使用js进行导航，它可以很好地运行，没有错误。

HTML：

<a (click)="viewDetail(contact.id)" data-toggle="tab" title="Click to view details">
   {{contact.name}}
</a>

使用Javascript：

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

Answer 1

你有没有尝过这样的话。

<a [routerLink]="['contacts', contact.id]">{{contact.name}}</a>.

Answer 2

你试过这个吗？

<a [routerLink]="['/contacts/', contact.id]">{{contact.name}}</a>.