如何通过条件判断控制Angular组件output输出绑定是否生效？

解决方案 #

方案1：处理函数内加逻辑判断（最推荐，写法最简单） #

Angular事件绑定本身没有原生的「条件绑定」语法，你可以保留所有事件绑定，只在触发对应逻辑前判断flag是否生效即可，写法如下：

• 模板绑定部分直接写全：

<app-row-toolbar
  [isConfig]="isConfig"
  [isEdit]="isEdit"
  [isDelete]="isDelete"
  (onConfig)="handleConfig(item)"
  (onEdit)="handleEdit(item)"
  (onDelete)="handleDelete(item)"
>
</app-row-toolbar>

• 在MainComponent的对应处理函数开头加判断：

handleConfig(item) {
  // 不符合条件直接终止执行
  if (!this.isConfig) return;
  // 原有逻辑写在下方
}

handleDelete(item) {
  if (!this.isDelete) return;
  // 原有逻辑写在下方
}

这种方案没有冗余代码，也完全能满足需求。

方案2：子组件内部控制事件触发 #

如果不需要父组件做判断，可以直接修改app-row-toolbar的内部逻辑：子组件触发输出事件前，先判断对应的输入变量是否为true，符合条件才emit事件：

// app-row-toolbar组件内部代码
@Input() isConfig: boolean;
@Output() onConfig = new EventEmitter();

configClick() {
  // 只有isConfig为true时才向外触发事件
  if (this.isConfig) {
    this.onConfig.emit();
  }
}

方案3：条件渲染不同绑定的组件 #

如果你确实需要完全移除不需要的事件绑定，可以用*ngIf根据flag组合渲染对应版本的组件，不过这种写法适合flag组合较少的场景，冗余度较高：

<!-- 仅显示编辑按钮的场景 -->
<app-row-toolbar
  *ngIf="isEdit && !isConfig && !isDelete"
  [isEdit]="isEdit"
  (onEdit)="handleEdit(item)"
>
</app-row-toolbar>

<!-- 其他flag组合的组件对应补充即可 -->

原有写法不生效说明 #

你之前写的(onConfig)="isConfig ? handleConfig(item) : null"逻辑上是可以运行的，本质和方案1的判断逻辑一致，不生效大概率是模板内变量作用域问题、或者子组件未正确触发emit事件导致的，可以优先排查子组件的事件触发逻辑。

内容的提问来源于stack exchange，提问作者Thuận Dương Minh