如果子组件为空而不在其父组件中使用 *ngIf，如何不显示子组件？

Question

我有以下问题：

有一个组件 A 和一个子组件 B。

<app-alert [response]="alertMessage"></app-alert>

子组件 B 扩展了 Ngb-alert 组件并具有如下模板：

<ngb-alert #selfClosingAlert id="selfClosingAlert" *ngIf="alertMessage" [type]="alertStyle" (closed)="alertMessage = ''">
  {{ alertMessage }}
</ngb-alert>

当 alertMessage 为空时，警报被隐藏，但我的子组件 B 标记仍占用站点上的一些空间。一般来说，我希望子组件 B 能够自我负责。我搜索了很多答案，但一无所获。

Answer 1

我是这样解决的：

在子组件 B 组件装饰器中为我的 alertMessage 值添加了主机类条件

@Component({
  selector: 'app-alert',
  templateUrl: './alert.component.html',
  styleUrls: ['./alert.component.css'],
  host: {
    '[class.d-none]': 'alertMessage === ""',
  }
})

因此，当 alertMessage 为空时，我的子组件 B 标记获取 .d-none（引导程序）类，将其显示设置为“无”。现在当 alertMessage 为空时它不会占用任何地方。