选项卡内容实现有什么区别?
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>
如果条件为真,它将呈现应用程序组件模板。
我的方法是显示标签内容:
<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>
如果条件为真,它将呈现应用程序组件模板。