如何使用if表达式从ng-container引用ng-template

Question

我想在两个不同的ng-template部分中引用此模板：

<ng-template #expandedRow>
  <tr>
    <td>Some content</td>
  </tr>
</ng-template>

我这样引用它：

<ng-template #folderContent>
  <ng-container *ngIf="expanded; then expandedRow else undefined"></ng-container>
</ng-template>

是否有使用if then的更好方法。

是否有一种使用[hidden]的方法，因为ng-container不支持这种方法。

Answer 1

不确定您的情况是否可行，但可以使用ngTemplateOutlet确定模板是否在模板本身中可见：

我将以这种方式进行处理：

<ng-template #folderContent>
  <ng-container *ngTemplateOutlet="expandedRow; context: { visible: expanded }"></ng-container>
</ng-template>

并且，在expandedRow模板中：

<ng-template #expandedRow let-contentVisible="visible">
  <tr *ngIf="contentVisible">
    <td>Some content</td>
  </tr>
</ng-template>

这允许您将其他上下文参数传递给模板本身，从而确定模板是否直接在模板本身内部可见。

可以使用here找到工作中的堆叠闪电示例。

Answer 2

您可以尝试按相反的顺序进行操作，如下所示。

<ng-contaniner *ngIf="true else newone">
<div> true works</div> 
</ng-container>
    <ng-template #newone>
    false works</ng-template>