在Angular 10中显示或隐藏子级组件

在Angular 10中，我们可以使用*ngIf指令来显示或隐藏子级组件。*ngIf指令根据与指定表达式的计算结果来添加或删除DOM元素。

以下是将如何在Angular 10中使用*ngIf指令来显示或隐藏子级组件的步骤：

1. 创建子级组件

首先，我们需要创建一个子级组件。我们可以使用以下命令来创建一个名为child-component的组件：

ng generate component child-component

2. 在父级组件中使用子级组件

在父级组件中，我们可以使用以下代码将子级组件显示出来：

<app-child-component *ngIf="showChild"></app-child-component>

3. 添加showChild属性

我们需要在父级组件中声明一个名为showChild的属性。此属性将控制子级组件是否显示。

showChild: boolean = true;

4. 控制showChild属性的值

我们可以在父级组件的逻辑中控制showChild属性的值。当showChild属性为true时，子级组件将显示。否则，子级组件将被隐藏。

以下是一个简单示例，当用户单击按钮时，子级组件将被隐藏：

toggleChildVisibility() {
  this.showChild = !this.showChild;
}

<button (click)="toggleChildVisibility()">Toggle child visibility</button>
<app-child-component *ngIf="showChild"></app-child-component>

5. 隐藏子级组件时的警告

请注意，当我们将子级组件隐藏时，Angular将销毁该组件并从DOM中删除它。如果该组件拥有任何正在进行的活动，例如订阅，这可能会引起问题。因此，我们需要在子级组件中添加ngDestroy生命周期钩子，并确保我们取消订阅或清理所有正在进行的工作。

ngOnDestroy() {
  // Unsubscribe or clear any ongoing work here
}

以上就是在Angular 10中显示或隐藏子级组件的步骤和注意事项。