以角度动态地发射事件

Question

我正在尝试创建一个子组件，以便根据某些条件向父组件发出事件。

为了简单起见，假设我有一个子组件，并将接受一个输入(布尔值(，然后基于该输入，我想稍后发出一个事件。

<child-component
[canEmitValue]="false"
(emitValue)="someMethod()" //I want to add this emitValue based on the input.
>
</child-component>

我们正在尝试创建一个可重用的组件，并希望基于某些内容隐藏事件。

问题：

• 有没有一种方法可以动态添加事件，即添加@Output的行为而不隐式指定@Output
• 如果没有，有什么建议吗

Answer 1

要根据我发现的内容添加自定义事件，您可以：

constructor(
private el:ElementRef
) {  }

... some code
public someMethodThatChecksSoething(){
this.el.nativeElement
.dispatchEvent(new CustomEvent('todo', {
detail: value,
bubbles: true
}));
}

Answer 2

有没有一种方法可以动态添加事件，即添加@Output的行为而不隐式指定@Output

不，这不是Angular中输入/输出绑定的概念。点击此处阅读更多信息：https://angular.io/guide/inputs-outputs

在父模板中，事件绑定(emitValue)="someMethod($event)"将子模板中的事件连接到父模板。

据我所知，你基本上是在试图"禁用"该组件。那样的话子组件内部的输出事件发射器应该检查输入值，而不向父组件发射任何东西。

或者你可以尝试，我不建议：

<div *ngIf="condition; then thenBlock else elseBlock"></div>
<ng-template #thenBlock>
Content to render when condition is true.
<child-component [canEmitValue]="condition" (emitValue)="someMethod()"></child-component>
</ng-template>
<ng-template #elseBlock>
Content to render when condition is false.
<child-component [canEmitValue]="condition" ></child-component>
</ng-template>