是否可以将 [routerLink] 绑定到 div？角度 2+

Posted 2023-02-22

【中文标题】是否可以将 [routerLink] 绑定到 div？角度 2+

【英文标题】：Is it possible to bind a [routerLink] to a div? Angular 2+

【发布时间】：2019-02-06 09:46:34

【问题描述】：

我是 Angular 的新手，无论我搜索什么，我都没有找到关于这个主题的明确答案。

目前正在运行：

<div class="col-sm" (click)="brandListRoute()">

在我的组件中指向这个函数：

brandListRoute() 
        this.router.navigate(['explore/brands']);

所以这很完美，但是当我第一次尝试像这样绑定[routerLink] 时：

<div [routerLink]="['explore/brands']">  </div>

我可以点击 div 但没有任何反应。所以我的问题是，[routerLink] 是否仅适用于 anchor tags 和 buttons 之类的东西，还是我的上述逻辑有缺陷？

需要为我的问题找到最佳解决方案。提前非常感谢！

【参考方案1】：

是的，它可以附加到 div 标签，你的路线可能是错误的尝试在路线前面添加 /。

<div [routerLink]="['/explore/brands']"> go to this location </div>

【讨论】：

好东西！这是第一次工作，非常感谢。

谢谢。这很好用。我只想指出，如果您不使用锚标记，那么它不会在悬停时显示 URI，也不会提供“在新选项卡中打开”、“复制 URL”等上下文菜单选项。

注意：如果您打算绑定 'state' to route <div> 不会绑定数据，但是 <a> 将 - 在 Angular 8.1 和 8.2 中验证

@VikramDeshmukh 这是否意味着，如果我想在新选项卡中打开，将 routerLink 绑定到 div 将不起作用？

您应该避免这种情况，而更喜欢（单击）+ 以编程方式导航的方法，因为它会使您的 div “可聚焦”，Chrome 默认情况下会为聚焦元素添加黑色轮廓。