각도로 라우터 링크를 사용하여 요소 내부에 링크를 만드는 방법

Question

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> 

Answer 1

아래 시도 TS 파일을 해당에

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

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

희망이 도움이 에스!!