在 ng-template 中使用 ng-content

Question

是否可以在

<ng-content>

中使用 <ng-template>（及其

select

选项），还是只能在组件内使用？

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

中使用一种

ng-template

：

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

StackBlitz 上的Angular 14示例（可适用于早期版本）

Answer 3

现在可以（在 Angular 17 上测试以在 ng-template 中使用 ng-content）

import { Component } from "@angular/core";
import { NgTemplateOutlet } from "@angular/common";

@Component({
  selector: "app-sample",
  standalone: true,
  imports: [NgTemplateOutlet],
  template: `
   <ng-template #mainContent><ng-content /></ng-template>
   <ng-container *ngTemplateOutlet="mainContent" />
`
})
export class SampleComponent {}

然后在任何组件Html中

<app-sample>
  <p>Some work</p>
</app-sample>

Answer 4

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

这是我不久前整理的东西，演示了如何根据属性将 ng-content 放在 dom 上的某个位置。查看 tabs.component 的 html 以了解其使用情况。

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