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 !：（

Here is the live example

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。

这是我不久前汇总的内容，展示了将ng内容基于属性放在dom上的某个位置。查看tabs.component的html以查看使用情况。

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

Answer 3

你所能做的就是在没有 ng-container 的情况下使用 ng-content 和 ng-template。我为您的案例提供了简单的 example（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;
}

app.component.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);
  }
}

在ng-template中使用ng-content

3 个答案: