角 - 防止引發的onClick的 「父」 元素

Question

我有這個模板（的節選）：

<custom-panel [summary]="summary.activity" routerLink="/activities"> 
    <a *ngIf="(user$ | async)?.verification.isOK" (click)="openQuestionModal()">Verify</a> 
</custom-panel> 

...這 「部分」 類：

// imports here 

@Component({ 
    selector: 'custom-panel', 
    templateUrl: './custom-panel.component.html', 
    styleUrls: ['./custom-panel.component.scss'] 
}) 
export class CustomPanelComponent implements OnInit { 
    public summary$: Observable<Summary>; 
    public user$: Observable<User>; 

    constructor(private service: UserService, private dialog: MdDialog) { 
    // ... 
    } 

    public ngOnInit() { 
    // Populate this.user$ 
    // Populate this.summary$ 
    } 

    public openQuestionModal(): void { 
    console.log('openQuestionModal() ...'); 
    } 
} 

問題是：每當我點擊鏈接打開「問題模式」時，它也將我帶到/activities路線（最終在那裏打開模式對話框）。

有什麼辦法可以防止這種情況發生？

到目前爲止我發現的唯一方法是有一個布爾「標誌」並將[routeLink]指令更新爲：。我想擺脫那個「旗幟」。

Answer 1

您是否嘗試過使用stopPropagation？

(click)="openQuestionModal($event)" 

    public openQuestionModal(event): void { 
    event.stopPropagation(); 
    console.log('openQuestionModal() ...'); 
    }