在 Angular 9 中，当按钮被多次点击时，会触发多次事件，这可能导致问题。解决方法是使用 RxJS 的 debounceTime 操作符。

示例代码：

HTML：

Click me

Component：

import { Component } from '@angular/core'; import { Subject } from 'rxjs'; import { debounceTime } from 'rxjs/operators';

@Component({ selector: 'app-example', templateUrl: './example.component.html', styleUrls: ['./example.component.css'] }) export class ExampleComponent { private clickSubject = new Subject();

constructor() { this.clickSubject.pipe( debounceTime(500) ).subscribe(() => { this.onClick(); }); }

onClick() { console.log('Button clicked!'); }

buttonClicked() { this.clickSubject.next(); } }

在这个示例中，我们在 ngOnInit 函数中创建一个 clickSubject 的 Subject，然后在构造函数中使用 debounceTime 操作符将其转换为只有 500ms 延迟的 Observable。之后，我们将这个 Observable 订阅到 onClick 函数中。

最后，在 HTML 中，我们将 buttonClicked 函数绑定到按钮的点击事件，以便我们可以在其中调用 clickSubject.next()。这样，每次点击按钮时，我们都会调用 buttonClicked 函数，但实际上只有最后一次点击会触发 onClick 函数。