如何在组件的自己的选择器上使用 *ngIf？答案

【问题标题】：How to use *ngIf on own selector of a component?如何在组件的自己的选择器上使用 *ngIf？
【发布时间】：2020-11-07 18:59:37
【问题描述】：

我有一个组件<my-component>，我只想在设置了它的一个属性时才显示它。所以我想在<my-component>做这样的事情：

<ng-container *ngIf="myProperty">
    <div>...</div>
</ng-container>

组件是在 HTML DOM 中创建的。因此，为了避免它的创建，我的假设是我应该将 *ngIf 放在 <my-component> 的选择器上 <parent-component> 中，这将是这样的：

<parent-component>
    <my-component *ngIf="myProperty"></my-component>
</parent-component>

但在这种情况下，属性 myProperty 将设置在 <my-component> 而不是 <parent-component>。

那么，如果我的假设是正确的，那么实现它的方法是什么？

【问题讨论】：

【解决方案1】：

您的问题已经有了解决方案。你在做什么

<parent-component>
    <my-component *ngIf="myProperty"></my-component>
</parent-component>

称为内容投影。当您不允许使用*ngIf 进行渲染时，内容将不会被投影。

编辑

由于您忘记了重要一点，我在 StackBlitz 中调整了我的示例。为了做到这一点，您需要通过EventEmitter 将标志从内部组件发送到父组件。父组件对其做出反应，因此可以更改参数以隐藏或显示内部组件。

【讨论】：

我忘了提到 myProperty 是在<my-component> 中设置的。在这种情况下，<parent-component> 中不会设置 myProperty。我编辑我的问题。
感谢您的编辑。对于这样的事情，这似乎是一种相当“复杂”的方式。所以我想知道将 *ngIf 放在这个地方是否正确，或者它是否应该放在子组件中？
你也可以把它放到子组件中。如果 DOM 显示一个空组件，这并不重要——只要它不包含任何干扰页面的样式
不会有干扰，所以我会在子组件中使用*ngIf。感谢您的帮助！

【解决方案2】：

解决方案 1：最简单的解决方案是将 <my-component> 的内容（my-component.component.html 的内容）包装在 <ng-container> 中，并在其中添加 *ngIf。

解决方案 2：创建一个服务并在该服务中创建一个 behaviour subject，在两个组件中注入该服务，现在您可以从 <my-component> 切换该行为主题的值并监听 <parent-component> 以切换<my-component>

【讨论】：