防止角触发“父”元素上的onClick

Question

我有一个模板(摘录)：

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

...and这个“组件”类：

// 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]指令更新为：[routerLink]="isActive() ? '/activities' : null"。我想去掉那面“旗帜”。

Answer 1

你试过使用stopPropagation吗？

(click)="openQuestionModal($event)"

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