如何在 ngIf 中使用相同的模板答案

【问题标题】：How to use the same template in ngIf如何在 ngIf 中使用相同的模板
【发布时间】：2018-02-15 09:46:03
【问题描述】：

我有很多条件来展示同一个模板。例如：

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

【问题讨论】：

是的。它被称为组件：angular.io/api/core/Component
另见stackoverflow.com/questions/46055133/…
在这里查看 ngSwitch：angular.io/guide/template-syntax#the-ngswitch-directives

标签： javascript html angular typescript angular-ng-if

【解决方案1】：

是的，可以使用 NgIf DIRECTIVE

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

ngIf 计算表达式，然后在表达式分别为真或假时将 then 或 else 模板呈现在其位置。通常是：

则模板是 ngIf 的内联模板，除非绑定到不同的价值。
除非绑定，否则其他模板为空白。

下面是快照代码：

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

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

Angular4 ngIf 将为您提供更多详细信息。

希望这个plunker 能帮到你

【讨论】：

【解决方案2】：

实际上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，因为第一个就足够了。

Stackblitz

【讨论】：