Angular2 主机：{ '[routerLink]': '/foo' }

Question

我正在尝试使用 @Component.host.'[routerLink]' 声明将 routerLink 属性绑定到 a 元素但它崩溃了：

EXCEPTION: Error: Uncaught (in promise): Template parse errors: Can't bind to 'routerLink' since it isn't a known native property ("[ERROR ->]"): HostMatch@0:0

与
template: '<a [routerLink]="['/Matches', 'MatchesDetail', { match: id }]">{{id}}</a>'

配合使用效果很好

组件代码：

import { RouterLink } from 'angular2/router'

@Component({
    directives: [RouterLink],
    selector: 'a[match]',
    template: `{{id}}`,
    host: {
        '[routerLink]': "['/Matches', 'MatchesDetail', { match: id }]"
    }
})

重点是HTML这样：

<a href="/matches/1234">1234</a>

而不是：

<match><a href="/matches/1234">1234</a></match>

我做错了什么？谢谢。

Answer 1

这样使用routerLink是无效的。不支持以这种方式使用 routerLink。它是添加到元素标签的指令，而不是一些特殊的绑定语法。

host: {
    '[routerLink]': "['/Matches', 'MatchesDetail', { match: id }]"
}

Angular2 主机：{ '[routerLink]': '/foo' }

Angular2 host: { '[routerLink]': '/foo' }

angular2-routing

angular