Angular：ngOnChanges无法捕获父组件传入的Boolean类型@Input(false值)更新

我需要将下拉菜单的切换值传递给子组件，但子组件的ngOnChanges仅能检测到切换值为true的情况，无法检测到false的情况。

子组件（ChildComponent）代码 #

export class ChildComponent implements OnInit, OnChanges, OnDestroy {

  @Input() dropdownToggle!: boolean;

}
  
ngOnChanges(changes: SimpleChanges): void {
    if (changes['dropdownToggle']) {
      const currentValue = changes['dropdownToggle'].currentValue;
      console.log('ChildComponent ~ toggleDropdown value:', currentValue);
    }

父组件（ParentComponent）代码 #

export class ParentComponent implements OnInit, OnChanges {

  @Output() dropdownToggle = new EventEmitter<boolean>();

  showDropdown = false;
}

  ngOnInit(): void {
  @HostListener('document:click', ['$event']) checkExternalClick($event: Event) {
    if (!this._elementRef.nativeElement.contains($event.target)) {
      if (this.showDropdown) {
        this.toggleDropdown();
      }
    } else {
      this.showDropdown = true;
    }
  }

  toggleDropdown() {
    this.showDropdown = !this.showDropdown;
    this.dropdownToggle.emit(this.showDropdown);
    console.log('ParentComponent ~ toggleDropdown value:', this.showDropdown);
  }

父组件HTML代码 #

<div class="dropdown-hover" *ngIf="showDropdown">
  <div class="dropdown-value" (click)="toggleDropdown()">
    <input class="select" [value]="selected" (focus)="toggleDropdown()" />
  </div>
  <div class="dropdown-content">
    <hr class="divider" />
    <app-child-component [dropdownToggle]="showDropdown"></app-child-component>
  </div>
</div>

问题截图 #

错误分析与解决方案 #

1. 子组件生命周期钩子定义错误 #

子组件的ngOnChanges方法被写在了类的外部，这是语法错误，Angular无法识别这个生命周期钩子，必须将其移到组件类内部。

修正后的子组件代码：

export class ChildComponent implements OnInit, OnChanges, OnDestroy {

  @Input() dropdownToggle!: boolean;

  ngOnChanges(changes: SimpleChanges): void {
    if (changes['dropdownToggle']) {
      const currentValue = changes['dropdownToggle'].currentValue;
      console.log('ChildComponent ~ toggleDropdown value:', currentValue);
    }
  }

  ngOnInit(): void {
    // 初始化逻辑
  }

  ngOnDestroy(): void {
    // 销毁逻辑
  }
}

2. 父组件DOM销毁导致子组件无法接收变化 #

父组件中使用了*ngIf="showDropdown"，当showDropdown变为false时，整个dropdown-hover容器会被销毁，包含在其中的子组件也会被销毁。此时子组件已经不存在，自然无法检测到false值的变化。

解决方案：将*ngIf替换为[hidden]（仅隐藏元素，DOM节点保留），或者使用CSS控制显示状态。

修正后的父组件HTML代码：

<div class="dropdown-hover" [hidden]="!showDropdown">
  <div class="dropdown-value" (click)="toggleDropdown()">
    <input class="select" [value]="selected" (focus)="toggleDropdown()" />
  </div>
  <div class="dropdown-content">
    <hr class="divider" />
    <app-child-component [dropdownToggle]="showDropdown"></app-child-component>
  </div>
</div>

3. 父组件代码结构错误 #

父组件中@HostListener的位置错误（写在了ngOnInit方法内部），且未正确注入ElementRef，同时ngOnChanges实现但未使用。

修正后的父组件代码：

import { Component, OnInit, HostListener, ElementRef, Output, EventEmitter } from '@angular/core';

export class ParentComponent implements OnInit {

  @Output() dropdownToggle = new EventEmitter<boolean>();
  showDropdown = false;
  selected = ''; // 补充selected变量，避免模板报错

  constructor(private _elementRef: ElementRef) {}

  ngOnInit(): void {
    // 初始化逻辑
  }

  @HostListener('document:click', ['$event']) 
  checkExternalClick($event: Event) {
    if (!this._elementRef.nativeElement.contains($event.target)) {
      if (this.showDropdown) {
        this.toggleDropdown();
      }
    } else {
      this.showDropdown = true;
    }
  }

  toggleDropdown() {
    this.showDropdown = !this.showDropdown;
    this.dropdownToggle.emit(this.showDropdown);
    console.log('ParentComponent ~ toggleDropdown value:', this.showDropdown);
  }
}

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