时间戳

首页 > 解决方案 > @Output 和 @HostListener 单击会导致名称相同时超出最大调用堆栈大小

javascript - @Output 和 @HostListener 单击会导致名称相同时超出最大调用堆栈大小

问题描述

当有一个@Outputnamedclick并且有一个@HostListener监听时click，是否有可能使它不会发生最大调用堆栈大小超出错误？我想将输出值保留为单击，因为我已经知道我可以重命名输出名称并且它会起作用。

我试过e.stopPropagation()了，但这只是给我一个错误，说这stopPropagation不是一个函数。

我有一个看起来像这样的组件。它有一个传入的点击监听器和一个传出的点击发射器：

@Component({
  selector: 'my-button',
  template: `
    <button>{{label}}</button>
  `
})
export class Button {
  @Input() label = '';
  @Input() uri?: string;
  @Output('click') onButtonClick = new EventEmitter<string>();

  @HostListener('click')
  onClick() {
    if (this.uri) {
      this.onButtonClick.emit(this.uri);
    }
  }
}

然后我像这样使用它：

<my-button label="Google" uri="http://google.com" (click)="doSomething()"></my-button>

这是一个Stackblitz

标签： javascriptangular

解决方案

您可以添加如下条件：

@HostListener("click", ['$event'])
onClick(e) {
  if (this.uri && e !== this.uri) {
    this.onButtonClick.emit(this.uri);
  }
}

它仍然会发出两次，您需要在父组件中处理它。

另一种方法是删除

@Output('click') onButtonClick = new EventEmitter<string>();

并通过event对象传递数据：

@HostListener("click", ['$event'])
onClick(e) {
  if (this.uri) {
    e.data = this.uri;
  }
}

父.html

(click)="doSomething($event)"

父.ts

doSomething(e) {
  console.log(e.data);
}

分叉的 Stackblitz

推荐阅读