如何在 Angular 2 中使用路由器 link 创建一个 link 内部元素

Question

我需要在 div 元素上创建路由器 link，但还要在其中添加另一个用于打开菜单的锚点或按钮。因为路由器 link 菜单无法打开。单击按钮会触发路由器 link。我怎样才能让它发挥作用？

<div [routerLink]="/foo">
    <span>Title</span>
    <button (click)="openMenu()">Open menu</button>
</div>

实际上我正在使用 Angular Material 实际上问题是这样的：

<md-card [routerLink]="/foo">
    <span>Title</span>

    <button md-icon-button [mdMenuTriggerFor]="menu">
      <md-icon>more_vert</md-icon>
    </button>

    <md-menu #menu="mdMenu">
      <button md-menu-item (click)="rename()">
        <md-icon>create</md-icon>
        <span>Rename</span>
      </button>
      <button md-menu-item (click)="share()">
        <md-icon>share</md-icon>
        <span>Share</span>
      </button>
    </md-menu>
</md-card>

Answer 1

试试下面，

<button md-icon-button [mdMenuTriggerFor]="menu" (click)="open($event)" >
  <md-icon>more_vert</md-icon>
</button>

在对应的ts文件中，

open(e){
  // this will stop event to propagate to work on link click.
  e.stopPropagation();
}

希望对您有所帮助！！

如何在 Angular 2 中使用路由器 link 创建一个 link 内部元素

How to make a link inside element with router link in Angular 2

angular2-routing

angular-material2

angular