如果子组件为空而不在其父组件中使用 *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 标记仍然占用网站上的一些 space。通常我希望 Subcomponent B 是自我负责的。我搜索了很多答案，但一无所获。

Answer 1

我是这样解决的：

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

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

因此，当 alertMessage 为空时，我的子组件 B 标记获取 .d-none (bootstrap) class，这将它的显示设置为 'none'。现在当 alertMessage 为空时它不会占用任何位置。

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

How to not display subcomponent if it's empty without using *ngIf in it's parent?

css

ng-bootstrap

angular