Question

我想知道使用ng-template的理想情况是什么。我有以下情况。代码如下所示

<div *ngIf="somecond">html inside1</div>
<div *ngIf="somecond1">html inside2</div>
<div *ngIf="somecond2">html inside3</div>

其他开发者修改如下

<ng-template #text1>html inside1</ng-template>
<ng-template #text2>html inside2</ng-template>
<ng-template #text3>html inside3</ng-template>

<div *ngIf="somecond;then text1"></div>
<div *ngIf="somecond1;then text2"></div>
<div *ngIf="somecond2;then text3"></div>

在这种情况下，使用ng-template或普通代码的正确方法是否正确。我何时才真正使用ng-template

Answer 1

<template> <section id="section2"> <v-parallax :src="require('../../assets/images/members.jpeg')" height="380"> <v-layout column align-center justify-center> <v-flex xs12 sm12 md8> <v-card round class="elevation-0"> <v-card-title primary-title class="layout justify-center"> <h3 v-html="$t('lang.views.home.section4.thank_you')" ></h3> </v-card-title> <v-card-text> </v-card-text> </v-card> </v-flex> </v-layout> </v-parallax> </section> </template>的理想情况是您希望使用ng-template语句。

而不是：

else

你可以这样做：

<div *ngIf="isDisplayed">Item 1</div>
<div *ngIf="!isDisplayed">Item 2</div>

Answer 2

ng-template有几个（不常见的）用例。其内容未显示，您可以使用角度dom局部变量将其发送到指令或组件的输入，以便他们按照自己的意愿显示它。

*ngIf，*ngFor或*ngSwitch实际使用它，而星号版本只是一个别名。

正如@TheUnreal所说的其中一个主要用例是else语句，如显示加载：

<ng-template #loading>loading...</ng-template>
<div *ngIf="data; else loading">
   Content
</div>

虽然你的例子可能不是理想的使用方式，因为它只会导致你的模板出现并发症。

我何时才能在角度2+中使用ng-template

2 个答案: