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

Question

我有一个组件 <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>

但在这种情况下，属性 我的属性(property) 将设置在 <my-component>而不是在 <parent-component> .
那么，如果我的假设是正确的，那么实现它的方法是什么？

Answer 1

您已经在问题中找到了解决方案。你在做什么

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

称为内容投影。并且当您不允许使用 *ngIf 进行渲染时，将不会投影内容。 .
编辑
由于您忘记了重要的一点，我在我的 StackBlitz 中修改了我的示例。为了做到这一点，您需要通过 EventEmitter 将标志从内部组件发送到父组件。 .父组件对其使用react，因此可以更改参数以隐藏或显示内部组件。
StackBlitz example