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

莫德雷德

我正在编写一个组件,我们称它为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();
    ...

在子组件我希望能够看到,如果editHandlerrenameHandler被绑定到任何东西,如果他们都没有,只是从模板代码中使用删除它们*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"在父模板中添加一个参数就足够简单了,但是如果我可以告诉子组件并且可以将参数数量减少一半的话,它可以简化事情。

纳什11

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()方法的方法

的HTML

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

零件

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何在父组件中为共享组件提供 routerLink

在 AngularJS 中,如何确定是否为组件提供了属性?

如何在React组件中使用Jest和Enzyme来检查函数中是否包含参数而不检查其值?

如何通过Jest和Enzyme在React(Native)中为父组件提供功能来测试组件?

当它的列表允许多个值时,如何检查脚本中的参数是否为null?

是否可以创建为父组件提供配置的子节点?

是否为参数“ appIdName”提供了“无效值”?

如何检查值是否在列表中或列表是否为空?

如果参数为null,如何检查是否为null,然后使用IS NULL检查值

如何在LaTeX中检查参数是否为浮点

在函数Bash中:如何检查参数是否为集合变量?

检查路由参数是否为特定值?

如何在Angular的子组件中单击按钮时为父组件属性设置值

如何显示传递给组件的参数以及如何在reactjs中为组件提供可选参数?

如何检查数字字段中的值是否为整数?

如何检查PHP中的值是否为空[JSON]

如何检查Pandas DataFrame中的值是否为NaN

如何在SQLite中检查值是否为数字

如何在JavaScript中检查值是否为Map类型?

如何检查多维数组中任何值是否为空?

如何检查 POST 请求中的浮点值是否为空

如何检查json数据中的值是否为null

将带有参数的函数传递给子组件,并将返回值发送回父组件,以在reactjs中存储为父组件状态

鱼壳:检查是否为函数提供了参数

如何检查给定参数是否为条件?

如何检查参数是否为lambda

知道@output事件是否绑定在父组件中

如何检查参数是否为空并在查询中检查它

如何检查请求的查询字符串中是否提供了“未知”参数?