我不得不stopPropagation和preventDefault，以防止按钮展开上面的手风琴项。

所以…

@Component({
  template: `
    <button (click)="doSomething($event); false">Test</button>
  `
})
export class MyComponent {
  doSomething(e) {
    e.stopPropagation();
    // do other stuff...
  }
}

如果你在一个绑定到事件的方法中，简单地返回false:

@Component({
  (...)
  template: `
    <a href="/test.html" (click)="doSomething()">Test</a>
  `
})
export class MyComp {
  doSomething() {
    (...)
    return false;
  }
}

我刚刚检查了一个Angular 6应用程序，event. stoppropagation()在一个事件处理程序上工作，甚至不需要传递$event

(click)="doSomething()"  // does not require to pass $event


doSomething(){
   // write any code here

   event.stopPropagation();
}

提供的大多数解决方案都适用于Angular 11以上的版本，对于Angular 11或以下版本，我找到了一个可以使用的变通方案:

export class UiButtonComponent implements OnInit, OnDestroy {

  @Input() disabled = false;

  clickEmitter: Subject<any> = new Subject();

  constructor(private elementRef: ElementRef) { }

  ngOnInit(): void {
    this.elementRef.nativeElement.eventListeners()
      .map(listener => this.clickEmitter.pipe(filter(event => Boolean(event))).subscribe(event => listener(event)));
    this.elementRef.nativeElement.removeAllListeners();
    this.elementRef.nativeElement.addEventListener('click', (event) => {
      if (!this.disabled) {
        this.clickEmitter.next(event);
      }
    });
  }

  ngOnDestroy(): void {
    this.clickEmitter.complete();
  }
}

我基本上把当前组件的每个侦听器都放在Observable上，然后，我只注册一个侦听器，并在那里管理操作。

上面的例子是在给定一个布尔变量的情况下禁用按钮上的click事件。

我不得不stopPropagation和preventDefault，以防止按钮展开上面的手风琴项。

所以…

@Component({
  template: `
    <button (click)="doSomething($event); false">Test</button>
  `
})
export class MyComponent {
  doSomething(e) {
    e.stopPropagation();
    // do other stuff...
  }
}

在函数后添加false将停止事件传播

<a (click)="foo(); false">click with stop propagation</a>