Angular routerLink HostBinding答案

【问题标题】：Angular routerLink HostBindingAngular routerLink HostBinding
【发布时间】：2021-08-11 08:52:32
【问题描述】：

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

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

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

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

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

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

【问题讨论】：

这能回答你的问题吗？ Angular2 host: { '[routerLink]': '/foo' }
@Kordrad 感谢您的回复！不幸的是，我已经尝试过这种方法，结果相同。

标签： angular angular-routerlink angular2-hostbinding

【解决方案1】：

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

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

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

【讨论】：

感谢您的回复。那么有没有办法做我想要达到的目标呢？我特别不想将 routerLink 放在标签上，因为这样我就必须在使用组件的任何地方添加它。我希望它被添加到我的组件的宿主元素上，这样我就不必在我的组件 html 中添加另一个 div。
你可以监听点击事件，查看@user1313805的回答
哦，那是你自己的答案 :) - 这是个好方法

【解决方案2】：

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

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

【讨论】：