如何检查父组件中是否为 @Output() 参数给出了值

Question

我正在编写一个组件，我们称其为组件DropDownComponent，它将在我的应用程序中重用，并且将有 7 个以上可能的条目，每个条目都将在父组件中运行不同的操作。有些选项并非在它们运行的​​每个地方都可用。我想做的是在实例化中仅指定组件的 @Output 处理程序，如下所示：

<drop-down-component
    (addHandler)="add($event)"
    (removeHandler)="remove($event)"></drop-down-component>

然后在我的组件中：

export class DropDownComponent {
    @Output() addHandler: EventEmitter<string> = new EventEmitter();
    @Output() removeHandler: EventEmitter<string> = new EventEmitter();
    @Output() editHandler: EventEmitter<string> = new EventEmitter();
    @Output() renameHandler: EventEmitter<string> = new EventEmitter();
    ...

在子组件中，我希望能够查看editHandler和renameHandler是否绑定到任何东西，如果没有，只需使用 将它们从模板代码中删除*ngIf，所以我只看到：

<drop-down>
    <div (click)="...">Add</div>
    <div (click)="...">Remove</div>
    <!-- ngIf'd by component <div (click)="...">Edit</div> -->
    <!-- ngIf'd by component <div (click)="...">Rename</div> -->
</drop-down>

这似乎应该是可能的，但我还没有找到任何方法来做到这一点。[showAddOption]="true"显然，只需向父级模板添加一个参数就足够简单了，但如果我可以在子组件中进行说明，并且可以将参数数量减少一半，那么事情就会变得简单。

Answer 1

更新（v8+）

observers现已内部转移至Subject. 感谢@Tonio 指出这一点。

新的Subject实现使此检查更容易，如此处observed所示的函数

<div *ngIf="editHandler.observed" (click)="...">Edit</div>
<div *ngIf="renameHandler.observed" (click)="...">Rename</div>

v8以下

EventEmitter延伸Subject。这意味着您可以检查observers您的Subject.

在您的 HTML 中尝试此操作

<div *ngIf="editHandler.observers.length > 0" (click)="...">Edit</div>
<div *ngIf="renameHandler.observers.length > 0" (click)="...">Rename</div>

这也可以重写为

<div *ngIf="editHandler.observers.length" (click)="...">Edit</div>
<div *ngIf="renameHandler.observers.length" (click)="...">Rename</div>

正如评论中提到的，这里是如何使用hasObservers()方法来做到这一点

超文本标记语言

<div *ngIf="hasObservers(editHandler)" (click)="...">Edit</div>
<div *ngIf="hasObservers(renameHandler)" (click)="...">Rename</div>

成分

hasObservers(eventEmitter: EventEmitter<any>): boolean {
    return eventEmitter.observers.length > 0;
}