文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在ngIf中使用相同的模板

问如何在ngIf中使用相同的模板
EN

Stack Overflow用户

提问于 2017-09-06 19:34:25

回答 2查看 828关注 0票数 6

我有很多条件来显示相同的模板。例如：

<template [ngIf]="item.url.indexOf('http') == -1">
  <a class="ripple-effect" [routerLink]="[item.url]" *ngIf="isUserLoggedIn == true" >             
    <span class="media-body media-middle" *ngIf="isUserLoggedIn == true">{{item.name}}</span>
  </a> 
  <p>Hello, World!</p>
</template>

<template [ngIf]="item.url.indexOf('http') == 0">
  <a class="ripple-effect" [routerLink]="[item.url]" *ngIf="isUserLoggedIn == true" >             
    <span class="media-body media-middle" *ngIf="isUserLoggedIn == true">{{item.name}}</span>
  </a> 
  <p>Hello, World!</p>
</template>

<template [ngIf]="item.url.indexOf('http') == 1">
  <a class="ripple-effect" [routerLink]="[item.url]" *ngIf="isUserLoggedIn == true" >             
    <span class="media-body media-middle" *ngIf="isUserLoggedIn == true">{{item.name}}</span>
  </a> 
  <p>Hello, World!</p>
</template>

<template [ngIf]="item.url.indexOf('http') == 2">
  <a class="ripple-effect" [routerLink]="[item.url]" *ngIf="isUserLoggedIn == true" >             
    <span class="media-body media-middle" *ngIf="isUserLoggedIn == true">{{item.name}}</span>
  </a> 
  <p>Hello, World!</p>
</template>

是否可以使用这个html元素：

<a class="ripple-effect" [routerLink]="[item.url]" *ngIf="isUserLoggedIn == true" >             
   <span class="media-body media-middle" *ngIf="isUserLoggedIn == true">
        {{item.name}}
   </span>
</a> 
<p>Hello, World!</p>

然后放到某个地方，然后通过*ngIf中的名称/引用调用这个html元素？例如：

<template [ngIf]="item.url.indexOf('http') == 2">
  <!--reference to the repeatable code-->
</template>

html

angular

typescript

angular-ng-if

javascript

回答 2

Stack Overflow用户

回答已采纳

发布于 2017-09-06 22:58:23

实际上，ngIf有一个“酷”属性，then，您可以使用它：

  <ng-container *ngIf="item.url.indexOf('http') === -1; then myTemplate">
  </ng-container>

  <ng-container *ngIf="item.url.indexOf('http') === 0; then myTemplate">
  </ng-container>

  <ng-container *ngIf="item.url.indexOf('http') === 1; then myTemplate">
  </ng-container>

  <ng-template #myTemplate>
    <a class="ripple-effect" [routerLink]="[item.url]" *ngIf="isUserLoggedIn == true" >             
       <span class="media-body media-middle">{{item.name}}</span>
    </a> 
    <p>Hello, World!</p>
  </ng-template>

由于<template>已被废弃，所以请使用<ng-template>或<ng-container>。您可以删除模板中的第二个ngIf，因为第一个就足够了。

斯塔克布利茨

票数 6

Stack Overflow用户

发布于 2017-09-07 06:02:09

是的，可以使用NgIf指令

根据表达式的值有条件地包含模板。

ngIf对表达式进行计算，然后在表达式为真或假时在其位置呈现时间模板或其他模板。通常是：

然后，模板是ngIf的内联模板，除非绑定到不同的值。
否则，除非绑定，否则模板为空。

下面是snapcode：

<div *ngIf="condition; then thenBlock else elseBlock"></div>

    <ng-template #thenBlock></ng-template>
    <ng-template #elseBlock></ng-template>

Angular4 ngIf会给你更多的细节。

希望这个柱塞能帮到你

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/46083050

复制

相似问题

问如何在ngIf中使用相同的模板
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在ngIf中使用相同的模板EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在ngIf中使用相同的模板
EN