0

简单的问题：

Angular 文档建议不要在组件端进行条件渲染的情况下使用 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 是否仍会被渲染？

4

1 回答 1

0

我试图重现你在这个 stackblitz 示例中描述的情况

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

<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 则不会）

于 2021-09-15T20:43:46.063 回答