选项卡内容实现有什么区别?

What is difference between tab content realization?

我的方法是显示标签内容:

<mat-tab-group>
  <mat-tab label="First">
    <ng-template matTabContent>
      The First Content
    </ng-template>
  </mat-tab>
</mat-tab-group>

这有什么区别

<mat-tab-group>
  <mat-tab label="First">
    <ng-template *ngIf="condition">
      The First Content
    </ng-template>
  </mat-tab>
</mat-tab-group>

还有这个?

<mat-tab-group>
  <mat-tab label="First">
    <app-component *ngIf="condition"></app-component>
  </mat-tab>
</mat-tab-group>

A:

<app-component *ngIf="condition"></app-component>

如果 condition 值为真,则上面的代码加载 app-component.

B:

  <ng-template *ngIf="condition">
      The First Content
  </ng-template>

以上代码不会呈现任何内容。这是因为 <ng-template> 是模板元素,永远不会直接显示。它仅在与结构指令一起使用时有效。

在渲染之前,Angular将上面的代码替换为:

<ng-template [ngIf]="condition">
  <ng-template>
    The First Content
  </ng-template>
</ng-template>

这就是为什么即使condition值为真,也不会显示任何内容。 <ng-template> 将由 Angular 的诊断注释替换,并且由于没有结构指令,因此不会显示任何内容。

方法一:

<ng-template *ngIf="condition">
      The First Content
</ng-template>

以上模板将不会在视图中呈现,因为它是虚拟元素。我们可以将它与模板引用变量和 *ngTemplateOutlet 指令一起使用,如下所示:

<ng-template #myContent>This is ngTemplate content</ng-template>
<div *ngTemplateOutlet="myContent"></div>

在上面的代码中,myContent 是一个带有“#”符号的模板引用变量。所以元素将被内容替换。通过使用它,我们可以定义可重复使用的模板并在许多地方使用。

方法二:

<app-component *ngIf="condition"></app-component>

如果条件为真,它将呈现应用程序组件模板。