Как сделать ссылку внутри элемента со ссылкой на маршрутизатор в Angular 2

Мне нужно сделать ссылку маршрутизатора на элементе div, но также добавить в него еще один якорь или кнопку, которая открывает меню. Из-за маршрутизатора меню ссылки не может быть открыто. При нажатии на кнопку активируется ссылка на маршрутизатор. Как я могу заставить его работать?

<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>

angular angular-material2 angular2-routing
person user3812733    schedule 26.04.2017    source источник
comment
Вы пробовали решение, которое я добавил?   -  person Madhu Ranjan    schedule 27.04.2017

Ответы (1)


arrow_upward
2
arrow_downward

попробуйте ниже,

<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();
}

Надеюсь это поможет!!

person Madhu Ranjan    schedule 26.04.2017
comment
Спасибо, я упростил ваш код до (click)="$event.stopPropagation()", и он работает. Я нашел очень похожий вопрос здесь /вопросы/35274028/ - person user3812733; 27.04.2017