清空 ng-content 字段会发生什么

Question

简单的问题：

Angular 文档建议不要在 component 端进行条件渲染的情况下使用 ng-content：

如果您的组件需要有条件地渲染内容，或多次渲染内容，您应该将该组件配置为接受包含您要有条件地渲染的内容的元素。

不建议在这些情况下使用元素，因为当组件的使用者提供内容时，该内容始终会被初始化，即使组件没有定义元素或该元素位于 ngIf 语句中。 来自：https://angular.io/guide/content-projection#conditional-content-projection

这是否也适用于组件槽的消费者？例如：

<custom-table-component>
  <div ng-content-select-directive *ngIf="condition">
      This is a conditionally rendered element inhabiting an ng-content slot of a parent 
      component
  </div>
</custom-table-component>

如果条件为假，底层的 ng-content-select 是否仍会被渲染？

Answer 1

我试图重现你在this stackblitz example中描述的情况

由此看来，如果条件为false，则内部ng-content 将不会在这些情况下呈现。

<div>
  <h1>Inner stuff here:</h1>
  <div style="border: 1px solid red">
    <app-custom-table-component>
      <div ng-content-select-directive *ngIf="false">
        This is a conditionally rendered element inhabiting an ng-content slot of a parent 
        component
    </div>
    </app-custom-table-component>
  </div>

</div>

你可以看到 DOM 中什么都没有，只有调试信息：

您可以尝试将 ngIf 更改为 true 以查看它在 DOM 中的显示方式（并且自定义指令也会被初始化，如果 ngIf 为 false，则不会初始化）