如何在角度中渲染开槽的 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">

  <ng-template>

    I am rendered

  </ng-template>

</tab>

儿童：

export class HelloComponent  {

  @ContentChild(TemplateRef)

  template?: TemplateRef<any>;

  @Input()

  show?: boolean;

}

子模板：

<ng-container *ngIf="show" [ngTemplateOutlet]="template"></ng-container>

工作示例

另一种方法是将显示留给父组件：

父模板：

<button (click)="show = !show">Toggle</button>

<tab>

  <ng-template [ngIf]="show">

    I am rendered

  </ng-template>

</tab>

子模板：

<ng-content></ng-content>

工作示例

最后一个答案听起来像是反对我的第一个答案，我提到你不能用它来渲染，但在这种情况下，它正在处理模板的渲染。ng-contentng-template*ngIf