如何使用if表達式從ng-container中引用ng-template

Question

我有這個模板，我想在 2 個不同的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確定模板是否在模板本身中ngTemplateOutlet ：

我會以這種方式處理它：

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

並且，在 expandRow 模板中：

<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>