如何将eventEmitter传入自定义Angular Material滑动开关组件并获取返回值

错误原因 #

• @Output() 输出事件必须使用圆括号 () 绑定，你当前使用方括号 [] 属于输入属性绑定逻辑，无法接收事件返回值
• 接收组件emit的事件参数需要使用Angular内置固定变量 $event，你自定义的toggleEvent变量未赋值，传入后自然为undefined

修正代码 #

父组件调用HTML #

<custom-slide-toggle
        [toggleId]="'enable_user'"
        [controlName]="'enableUser'"
        (toggleClick)="onEnableUser($event)"
        [tabNumber]="5"
        [toggleText]="'A custom slide toggle'"
      ></custom-slide-toggle>

父组件TS代码 #

删除无用的toggleEvent变量声明即可，原有处理函数无需修改：

public onEnableUser($event: MatSlideToggleChange) {
   console.log('toggle was clicked', $event);
}

扩展说明 #

如果需要给不同的自定义滑动开关传入不同的点击处理函数，只要给不同实例的(toggleClick)绑定不同的父组件方法即可，示例：

<!-- 第一个开关绑定处理函数A -->
<custom-slide-toggle (toggleClick)="handleToggleA($event)"></custom-slide-toggle>
<!-- 第二个开关绑定处理函数B -->
<custom-slide-toggle (toggleClick)="handleToggleB($event)"></custom-slide-toggle>

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