如何使用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>

和，在扩展的模板中：

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

这使您可以将其他上下文参数传递到模板本身，从而确定模板本身是否直接可见模板。

工作stackblitz示例可以在此处找到。

Answer 2

您可以像下面一样尝试反向顺序。

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