Angular -当有人点击嵌套按钮时，如何阻止锚点点击

<button (click)="onClick($event)">嵌套按钮</button>

onClick(event: MouseEvent) {
  event.preventDefault();
  // 执行其他操作
}

import { Directive, HostListener } from '@angular/core';

@Directive({
  selector: '[preventAnchorClick]'
})
export class PreventAnchorClickDirective {
  @HostListener('click', ['$event'])
  onClick(event: MouseEvent) {
    event.preventDefault();
    // 执行其他操作
  }
}

<button preventAnchorClick>嵌套按钮</button>

<button (click)="onClick($event)">嵌套按钮</button>

preventAnchorClick = true;

onClick(event: MouseEvent) {
  if (this.preventAnchorClick) {
    event.preventDefault();
  }
  // 执行其他操作
}