Angular子组件如何检测父组件是否绑定自身的@Output事件

你可以直接利用EventEmitter继承自RxJS Subject的特性，通过其内置方法检测是否有父组件监听该事件，具体实现如下：

方法一：使用hasObservers()检测订阅者 #

EventEmitter继承了RxJS Subject的hasObservers()方法，该方法会返回布尔值，标识当前是否存在订阅者。

组件代码修改 #

@Component({
    selector: 'app-child',
    ...
})
export class ChildComponent implements OnInit {
    @Output() previous = new EventEmitter<void>();
    hasPreviousListener = false;

    ngOnInit() {
       // 检测是否有父组件监听previous事件
       this.hasPreviousListener = this.previous.hasObservers();
    }
}

模板中控制按钮显示 #

可以直接在模板调用方法判断，也可以使用提前存好的组件属性：

<!-- 方式1：直接在模板调用方法 -->
<button *ngIf="previous.hasObservers()" (click)="previous.emit()">Previous</button>

<!-- 方式2：使用组件属性 -->
<button *ngIf="hasPreviousListener" (click)="previous.emit()">Previous</button>

注意事项 #

• 该方法依赖RxJS的Subject API，目前所有稳定版Angular的EventEmitter都继承自Subject，可放心使用；
• 无论是父组件通过模板绑定(previous)="onPrevious"，还是通过@ViewChild手动订阅previous事件流，hasObservers()都能准确检测到；

替代方案：显式输入控制 #

如果担心依赖内部API的稳定性，你提到的@Input() showPreviousButton是更稳妥的显式方案，代码示例：

@Component({
    selector: 'app-child',
    ...
})
export class ChildComponent {
    @Output() previous = new EventEmitter<void>();
    @Input() showPreviousButton = false;
}

父组件使用时：

<!-- 需要显示按钮时 -->
<app-child (previous)="onPrevious" [showPreviousButton]="true"></app-child>

<!-- 不需要显示时 -->
<app-child></app-child>

内容的提问来源于stack exchange，提问作者Jeanluca Scaljeri