我正在编写一个组件,我们称它为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"
在父模板中添加一个参数就足够简单了,但是如果我可以告诉子组件并且可以将参数数量减少一半的话,它可以简化事情。
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] 删除。
我来说两句