Angular单选按钮：基于选择隐藏Div并向其他组件输出值

嘿Mike，你的困惑其实挺典型的——当用@Output向外传递状态时，确实没法再把它当布尔值用来控制视图了。不过咱们有几个既优雅又符合Angular最佳实践的方案，一起来看看：

这其实是最直观也最常用的做法，你只需要在组件内部保留一个布尔变量存储当前选中状态，同时在更新这个状态时触发@Output事件。这样既满足了内部视图控制的需求，又能把状态传递给父组件，完全不存在冗余的问题哦。

组件类代码： #

// 本地存储单选按钮的选中状态
private _existingFlows = false;
// 向外传递状态的EventEmitter
@Output() existingFlows = new EventEmitter<boolean>();

setExistingFlows(value: boolean) {
  // 更新本地状态
  this._existingFlows = value;
  // 向外触发事件，传递最新状态
  this.existingFlows.emit(value);
}

模板中控制显示隐藏： #

<!-- 直接用本地的布尔变量控制 -->
<div [hidden]="!_existingFlows">
  <!-- 这里放你需要显示/隐藏的内容 -->
</div>

如果父组件也需要和子组件共享这个单选按钮的状态，那双向绑定会是更合适的选择。Angular支持通过@Input+@Output的组合实现双向绑定，这样子组件内部可以直接用输入的布尔值控制视图，同时修改时自动同步给父组件。

组件类代码： #

// 接收父组件传递的初始状态
@Input() existingFlows = false;
// 命名要遵循InputNameChange的规则，这样才能用双向绑定语法
@Output() existingFlowsChange = new EventEmitter<boolean>();

setExistingFlows(value: boolean) {
  // 更新内部状态
  this.existingFlows = value;
  // 触发事件通知父组件更新
  this.existingFlowsChange.emit(value);
}

子组件模板控制显示： #

<!-- 现在existingFlows是纯布尔值啦，可以直接用 -->
<div [hidden]="!existingFlows">
  <!-- 你的内容 -->
</div>

父组件中使用双向绑定： #

<!-- 用[(existingFlows)]实现双向同步 -->
<your-component [(existingFlows)]="parentComponentVariable"></your-component>

这里要澄清一下：你定义的@Output() existingFlows是EventEmitter<boolean>类型，它的作用是触发事件传递值，而不是存储状态，所以自然不能直接当作布尔值用在[hidden]这样的属性绑定里。咱们上面的方案都是把状态存储和事件传递分离开，这也是Angular组件设计的核心思路之一哦。

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