Angular父子组件通信故障：点击按钮无法切换父组件显示状态

问题背景 #

作为Angular新手，开发航班调度应用时遇到父子组件通信问题：FlightList父组件与ShowHideComponent子组件无法实现交互，需求是点击子组件的「Hide」按钮隐藏父组件的航班列表，点击「Show」按钮重新显示，其他功能正常。

现有代码问题分析 #

1. 父组件未绑定子组件的输入输出属性 #

父组件模板中使用子组件时，没有绑定子组件定义的@Input()和@Output()属性，导致父子组件无法传递数据和监听事件。

2. 子组件事件发射逻辑错误 #

子组件onShowHide()方法中硬将isShowHide设为true后发射，无法正确传递「显示/隐藏」的状态切换值，不符合需求逻辑。

3. 父组件存在未定义变量与无效生命周期使用 #

父组件ngOnChanges中引用了未声明的isShowHide变量，且该生命周期钩子监听的是父组件自身的@Input()属性（flights），与子组件状态无关，不会触发。

4. 父组件模板*ngIf语法错误 #

父组件表格的*ngIf="true;false"是无效语法，无法实现基于状态的显示隐藏控制。

修复后的完整代码 #

子组件（show-hide-component.component.ts） #

import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
@Component({
  selector: 'app-show-hide-component',
  templateUrl: './show-hide-component.component.html',
  styleUrls: ['./show-hide-component.component.css']
})
export class ShowHideComponentComponent implements OnInit {
  @Input() isVisible!: boolean; // 接收父组件的显示状态
  textShowHide: string = "Hide"; // 按钮显示文本

  @Output() visibilityChanged = new EventEmitter<boolean>(); // 发射状态变化事件

  constructor() { }

  ngOnInit(): void {
    // 初始化按钮文本
    this.textShowHide = this.isVisible ? "Hide" : "Show";
  }

  onShowHide(): void {
    const newVisibility = !this.isVisible;
    this.visibilityChanged.emit(newVisibility);
    this.textShowHide = newVisibility ? "Hide" : "Show";
  }
}

子组件模板（show-hide-component.component.html） #

<button type="button" class="btn btn-success" (click)="onShowHide()">
    {{textShowHide}}
</button>

父组件（flight-list.component.ts） #

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-flight-list',
  templateUrl: './flight-list.component.html',
  styles: []
})
export class FlightListComponent implements OnInit {
  @Input() flights!: any[];
  subtitle = 'Active Flight Schedule';
  isListVisible: boolean = true; // 控制航班列表显示的状态变量

  constructor() { }

  ngOnInit(): void {
  }

  // 接收子组件传递的状态变化
  updateListVisibility(newState: boolean): void {
    this.isListVisible = newState;
  }
}

父组件模板（flight-list.component.html） #

<br>
<h3 style="text-align: center;">
  {{subtitle}}
  <app-show-hide-component 
    [isVisible]="isListVisible"
    (visibilityChanged)="updateListVisibility($event)">
  </app-show-hide-component>
</h3>
<table class="table table-hover" *ngIf="isListVisible">
  <!-- 航班列表内容 -->
</table>

修复说明 #

1. 父子组件绑定：父组件通过[isVisible]="isListVisible"向子组件传递当前显示状态，通过(visibilityChanged)="updateListVisibility($event)"监听子组件的状态变化事件。
2. 子组件逻辑修正：移除无效的visible变量，直接基于父组件传递的isVisible状态切换按钮文本，并发射正确的状态值。
3. 父组件状态管理：新增isListVisible变量控制表格显示，通过updateListVisibility方法接收子组件事件，更新状态。
4. 模板语法修正：将表格的*ngIf绑定到isListVisible变量，实现基于状态的显示隐藏。

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