angular - Angular routerLink HostBinding

Question

我想将 routerLink 添加到 Angular 组件中的主机元素，如下所示：

@HostBinding('routerLink') routerLink = '/my-route'

但是当我单击该组件时，它不会导航到指定的路线。我究竟做错了什么？Angular 11甚至可以做到这一点吗？

Use @HostBinding or @HostListener rather than the 编辑：我还尝试了旧的主机绑定方式（tslint: host不推荐这种方式 metadata property (https://angular.io/styleguide#style-06-03) (no-host-metadata-property)tslint(1)：

host: {
  '[routerLink]': '[\'/my-route\']'
},

这之后也没有路由器导航。

Answer 1

您混淆了术语 -routerLink是一个具有属性（同名）的指令 - 但是，您使用它的方式，您的期望是组件本身有一个名为的属性routerLink- 但它没有。

正确的使用方法routerLink是将其作为 Angular 指令添加到 Angular 模板中的元素或组件中：

<some-component routerLink="..."></some-component>

Answer 2

到目前为止，我可以让导航在组件本身上以编程方式工作的唯一方法是这样的：

@HostListener('click')
onClick($event): void {
  this.router.navigate(['/my-route'])
}