如何在角度中渲染开槽的 ng 模板

Question

我有自定义组件。此组件的模板如下所示：tabtab

<ng-content></ng-content>

我使用这样的组件：tab

<tab>

  <ng-template>

    ...

  </ng-template>

</tab>

在组件内部，我有一个参数。根据这个参数，我希望这个槽被渲染或不渲染。我该如何实现这一点？如何从组件内部呈现此内容？tabInputInputng-templateng-templatetab

Answer 1

如果使用 ，则不能使用它来呈现此内容。您需要使用以下指令：ng-templateng-contentngTemplateOutlet父模板：<button (click)="show = !show">Toggle</button><tab [show]="show">&nbsp; <ng-template>&nbsp; &nbsp; I am rendered&nbsp; </ng-template></tab>儿童：export class HelloComponent&nbsp; {&nbsp; @ContentChild(TemplateRef)&nbsp; template?: TemplateRef<any>;&nbsp; @Input()&nbsp; show?: boolean;}子模板：<ng-container *ngIf="show" [ngTemplateOutlet]="template"></ng-container>工作示例另一种方法是将显示留给父组件：父模板：<button (click)="show = !show">Toggle</button><tab>&nbsp; <ng-template [ngIf]="show">&nbsp; &nbsp; I am rendered&nbsp; </ng-template></tab>子模板：<ng-content></ng-content>工作示例最后一个答案听起来像是反对我的第一个答案，我提到你不能用它来渲染，但在这种情况下，它正在处理模板的渲染。ng-contentng-template*ngIf