Angular中点击父组件页面时如何控制子组件div显示隐藏

你现有代码存在两个基础问题，修正后加少量逻辑就能实现点击父组件区域控制子组件div显隐的需求，完全适配你用的OnPush变更检测模式。

1. 先修正原代码的错误 #

你原来的父组件模板属性绑定写法错误，[showFilters]是子组件的输入属性绑定，必须写在子组件起始标签内部，写在标签夹着的内容区是完全无效的。
另外子组件直接修改@Input()传入的属性值不符合Angular单向数据流要求，在OnPush模式下很容易出现值不同步、视图不更新的问题，需要调整为子组件发事件通知父组件改值的模式。

2. 父组件代码实现 #

首先在父组件类中维护显隐状态，绑定全局点击事件，同时处理事件冒泡避免子组件点击误触发：

import { Component } from '@angular/core';

@Component({
  selector: 'parent-component',
  templateUrl: './parent-component.html'
})
export class ParentComponent {
  // 统一维护筛选区显隐状态
  showFilters = false;

  // 父组件区域点击时切换显隐
  handleParentClick() {
    this.showFilters = !this.showFilters;
  }

  // 拦截子组件区域的点击事件，阻止冒泡到父组件
  handleChildZoneClick(event: Event) {
    event.stopPropagation();
  }
}

父组件模板修正绑定，添加事件逻辑：

<!-- 父组件根节点绑定点击事件 -->
<div class="parent-page" (click)="handleParentClick()">
  <!-- 父组件其他页面内容放这里 -->

  <!-- 子组件外层包一层容器做事件拦截 -->
  <div (click)="handleChildZoneClick($event)">
    <child-component 
      [showFilters]="showFilters"
      (toggleFilter)="showFilters = !showFilters"
    ></child-component>
  </div>
</div>

3. 子组件代码调整 #

调整子组件逻辑，不要直接修改输入属性，通过输出事件通知父组件更新状态，适配OnPush变更检测：

import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';

@Component({
  selector: 'child-component',
  templateUrl: './child-component.html',
  styleUrls: ['./child-component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class ChildComponent {
  // 仅接收父组件传入的显隐状态，不在子组件内部直接修改
  @Input() showFilters = false;
  // 新增输出事件，子组件内按钮点击时通知父组件切换状态
  @Output() toggleFilter = new EventEmitter<void>();

  // 原有按钮点击逻辑改为触发事件
  openFilter() {
    this.toggleFilter.emit();
  }
}

子组件的HTML模板原有逻辑不需要改动：

<div class="filterDiv" *ngIf="showFilters">
  <!-- 筛选区内容 -->
</div>
<!-- 原有控制按钮 -->
<button (click)="openFilter()">筛选</button>

关键注意点 #

• 必须做事件冒泡拦截：如果不拦截子组件区域的点击事件，点击子组件内任何元素（包括原有切换按钮）时，事件都会冒泡到父组件触发切换，会导致点击一次触发两次状态变更，功能失效。
• 开OnPush模式时严格遵循单向数据流：@Input传入的值由父组件统一维护，子组件只通过@Output发事件通知父组件修改，不要在子组件内部直接改输入属性，避免出现视图不更新、状态不同步的问题。

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