时间戳

首页 > 解决方案 > 标签内容实现有什么区别？

angular - 标签内容实现有什么区别？

问题描述

有我的方法来显示标签内容：

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

标签： angularangular7angular8

解决方案

A： 

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

如果conditionvalue 是真实的，那么上面的代码会加载app-component.

乙：

  <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 的诊断注释替换，并且由于没有结构指令，因此不会显示任何内容。

推荐阅读