Angular - 组件可见性切换不起作用

Question

我设置了一个简单的应用程序，由两个组件组成：主应用程序和横幅。横幅在应用程序组件中呈现，其想法是从仪表板组件切换横幅的可见性。

上述方法第一次运行良好（即显示横幅，然后隐藏），但在随后的尝试中，横幅仍然隐藏。下面是代码：

app.compoenent.html

<app-banner [showAlert]="showAlert" [alertMessage]="alertMessage"></app-banner>

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

app.compoenent.ts

import { Component, VERSION } from '@angular/core';
import { BannerComponent } from './components/banner/banner.component';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name = 'Angular ' + VERSION.major;
  showAlert: boolean = false;
  alertMessage: string = '';

  onClick() {
    this.alertMessage = 'Banner Message';
    this.showAlert = true;
  }
}

banner.compoenent.html

<div [hidden]="!showAlert">
    <div>
        <span>
            {{alertMessage}}
        </span>
        <a class="close" (click)="closeAlert()" style="text-decoration: underline">[close]</a>
    </div>
</div>

banner.compoenent.ts

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

@Component({
  selector: 'app-banner',
  templateUrl: './banner.component.html',
  styleUrls: ['./banner.component.scss']
})
export class BannerComponent implements OnInit {
    @Input() alertMessage!: string;
    @Input() showAlert: boolean = false;
    @Input() open() {
        this.showAlert = true;
    }

    constructor() { }

    ngOnInit(): void {
    }

    closeAlert(): void {
        this.showAlert = false;
    }
}

在上面的例子中，当按钮被点击时，app.component.ts中会执行如下代码：

this.alertMessage = 'error';
this.showAlert = true;

这正确显示了横幅 div。横幅组件包含一个链接标签，事件处理程序将其 showAlert 属性设置为 false 以隐藏横幅 div - 同样这也可以按预期工作。

但是，现在如果再次单击应用组件中的按钮，即使再次将 showAlert 属性设置为 true，横幅仍将保持隐藏状态。

已经设置了 Stackblitz 来演示：

https://stackblitz.com/edit/angular-ivy-9sadyj

看不到我哪里出错了，欢迎任何见解。

Answer 1

问题：

目前您只是隐藏警报。所以它永远不会被重新创建，而是留在 DOM 中。这样，它就永远不会从仪表板组件传递新值，就仪表板而言，它完成了它的工作。

解决方案：

只需有条件地在仪表板组件中的布尔值上呈现您的横幅，将其完全从 DOM 中取出并重新添加：

在dashboard.component.ts中：

showBanner = true

在仪表板模板中：

<app-banner *ngIf="showBanner" [alertMessage]="alertMessage"></app-banner>

然后用任何逻辑翻转该布尔值：

例如，@Output 发出一个事件。

这是StackBlitz 上的一个工作示例。

一些注意事项：

您试图隐藏元素的方式仅在您将“showAlert”逻辑移动到子组件时才有效，并且只有组件的一部分（而不是按钮）会被隐藏。

但即便如此，我也会使用“display:none;”在“可见性：隐藏；”所以页面上不会有死区。