代码之家 › 专栏 › 技术社区 › POV

选项卡内容实现之间的区别是什么?

angular8 angular7 angular

0

POV · 技术社区 · 7 年前

我的方法是显示选项卡内容:

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

0 回复 | 直到 7 年前

1

Nikhil 7 年前

答:

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

如果 condition 值是truthy,然后上面的代码加载 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>

这就是为什么即使 条件 价值是真实的,没有内容会被展示。 <NG模板> 将被角度替换为诊断注释,并且由于没有结构指令,因此不会显示任何内容。

2

1

RanjithKumar 7 年前

方法1

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

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

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

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

方法2:

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

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