Angular组件可见性切换失效，仅首次生效后续无法显示问题排查

• 该问题是Angular单向数据流规则和输入属性变更检测逻辑共同导致的，具体流程如下：
  1. 初始状态父组件showAlert为false，子组件接收到对应值，banner隐藏
  2. 第一次点击按钮，父组件showAlert更新为true，值发生变化触发变更检测，子组件接收到新值，banner正常显示
  3. 点击banner关闭按钮时，子组件直接修改了自身@Input()修饰的showAlert属性为false，但父组件的showAlert仍然为true，父子组件状态出现不一致
  4. 再次点击按钮时，父组件执行this.showAlert = true，因为当前值已经是true，Angular变更检测判定值无变化，不会重新给子组件的输入属性传值，子组件的showAlert仍为false，因此banner始终隐藏

推荐严格遵循Angular单向数据流最佳实践，父组件维护状态，子组件仅通过输出事件通知父组件修改状态，具体修改如下：

1. 修改banner组件，新增输出事件 #

banner.component.ts代码调整：

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

@Component({
  selector: 'app-banner',
  templateUrl: './banner.component.html',
  styleUrls: ['./banner.component.scss']
})
export class BannerComponent {
    @Input() alertMessage!: string;
    @Input() showAlert: boolean = false;
    // 新增关闭事件，通知父组件更新状态
    @Output() close = new EventEmitter<void>();

    closeAlert(): void {
        // 不再直接修改输入属性，触发事件通知父组件
        this.close.emit();
    }
}

2. 父组件监听关闭事件同步状态 #

app.component.html代码调整：

<app-banner 
  [showAlert]="showAlert" 
  [alertMessage]="alertMessage"
  (close)="showAlert = false"
></app-banner>

<button (click)="onClick()">Apply</button>

该方案所有状态都由父组件统一维护，不会出现父子组件状态不一致的问题，多次点击开关都能正常生效。

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