Angular：点击两个独立组件显示同一组件的逻辑求解

嘿，我来帮你梳理下这个问题的解决思路～你遇到的核心问题其实是把Comp2的显示状态和单个组件的触发标志绑定死了，导致两个触发源的逻辑互相干扰。咱们换个思路，把Comp2的显示状态独立出来，就能完美解决冲突：

• 统一管理Comp2的显示状态：不要让Comp2的*ngIf依赖Comp1或Comp3各自的标志，而是单独维护一个专门控制Comp2显示的布尔状态（比如叫showComp2）。不管是Comp1还是Comp3被点击，它们做的事情都是把这个showComp2设为true——这样Comp2的*ngIf只需要判断这个统一状态，完全不会出现之前的逻辑冲突。

• 解耦触发源与显示状态：把Comp1、Comp3和Comp2的关系从“直接依赖”改成“间接触发”。Comp1和Comp3只负责告诉系统“要显示Comp2了”，而Comp2只关心“要不要显示”这个统一指令，彼此之间没有直接的逻辑绑定，自然就不会互相影响。

• 灵活扩展关闭逻辑（如果需要）：如果之后需要关闭Comp2，你可以单独加一个关闭按钮来修改这个统一状态；要是需要点击Comp1/Comp3切换显示（点一下显示，再点一下隐藏），也只需要把设值操作改成对showComp2取反就行，完全不影响两个组件各自的操作逻辑。

• 状态共享的实现方式：如果这三个组件是父子层级关系，就通过父组件来托管这个showComp2状态，Comp1和Comp3通过事件通知父组件更新状态，Comp2通过输入属性接收状态；如果是兄弟或跨层级组件，就用一个共享服务来管理这个状态，Comp1和Comp3调用服务的方法更新状态，Comp2订阅服务里的状态变化来控制显示。

这样调整后，不管是Comp1还是Comp3点击，都能独立触发Comp2的显示，而且彼此的操作不会互相干扰，完美解决你之前遇到的逻辑冲突问题～

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