在 ng-template 中使用 ng-content

Question

是否可以在<ng-template>內使用<ng-content> （及其選擇選項），還是只能在組件內使用？

<ng-container *ngTemplateOutlet="tpl">
  <span greetings>Hello</span>
</ng-container>

<ng-template #tpl>
  <ng-content select="[greetings]"></ng-content> World !
</ng-template>

上面的代碼只是渲染World ! :(

這是現場示例

Answer 1

據我所知，使用ng-content是不可能的，但您可以為模板提供參數。 因此可以傳遞另一個NgTemplate ，它可以再次與原始模板中的NgTemplateOutlet一起使用。 這是一個工作示例：

<ng-container *ngTemplateOutlet="tpl, context: {$implicit: paramTemplate}">
</ng-container>

<ng-template #paramTemplate>
  <span>Hello</span>
</ng-template>


<ng-template #tpl let-param>
  <ng-container *ngTemplateOutlet="param"></ng-container> World !
</ng-template>

實際上甚至可以將多個模板傳遞給原始模板：

<ng-container *ngTemplateOutlet="tpl, context: {'param1': paramTemplate1, 'param2': paramTemplate2}">
</ng-container>

<ng-template #paramTemplate1>
  <span>Hello</span>
</ng-template>

<ng-template #paramTemplate2>
  <span>World</span>
</ng-template>


<ng-template #tpl let-param1="param1" let-param2="param2">
  <ng-container *ngTemplateOutlet="param1"></ng-container>
  <ng-container *ngTemplateOutlet="param2"></ng-container>
</ng-template>

Answer 2

通過一些技巧，可以在ng-template中使用一種ng-content ：

    <h2>ngMacro (component)</h2>    

    <ng-template #tpl21 let-ctx>      
      <div>
      <ng-macro-content></ng-macro-content> World {{ctx.mark}}       
      </div>
    </ng-template>

    <ng-macro [template]="tpl21" [context]="{ mark: '!' }">
      Hello
    </ng-macro>

    <ng-macro [template]="tpl21" [context]="{ mark: '!!!' }">
      Hi
    </ng-macro>
    
    <h2>ngMacro (directive)</h2>    

    <ng-template #tpl22 let-ctx>      
      <div>
      <span *ngMacroContent></span>
      World {{ctx.mark}}       
      </div>
    </ng-template>

    <ng-container *ngMacro="tpl22; context: { mark: '!' }" >
      Hello
    </ng-container>

    <span *ngMacro="tpl22; context: { mark: '!!!' }" >
      Hi
    </span>

Angular 14的StackBlitz上的示例（可適用於早期版本）

Answer 3

你所能做的就是在沒有 ng-container 的情況下使用 ng-content 和 ng-template。 我為您的案例提供了簡單示例（Angular 11）

hello.component.ts

...
@Component({
  selector: 'hello',
  template: `
    <ng-template #emptyData>
      <ng-content select=".empty-data"></ng-content>
    </ng-template>

    <div *ngIf="isDataExists; else emptyData">
      Data exists
    </div>
  `,
})
export class HelloComponent  {
  @Input() isDataExists = false;
}

應用程序組件.html

<hello [isDataExists]="isDataExists">
    <div class="empty-data">
        Empty Data
    </div>
</hello>

app.component.ts

...
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
  public isDataExists = true;

  public ngOnInit(): void {
    setTimeout(() => this.isDataExists = false, 2000);
  }
}

Answer 4

您可以在 ng-template 中使用 ng-content。

這是我不久前整理的，展示了基於屬性將 ng-content 放在 dom 上的某個位置。 查看 tabs.component 的 html 以了解它的使用情況。

https://stackblitz.com/edit/mobile-ng-content