ngIfで同じテンプレートを使用する方法

Question

同じテンプレートを表示する条件がたくさんあります。たとえば：

<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') == -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要素を取ることは可能ですか？例えば：、<template>として

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

が廃止されている代わりに、または<ng-container><ng-template>を使用します。

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

Answer 1

実際ngIfはあなたを利用することができることを、 'クール' 属性、thenを持っています。 テンプレート内の2番目のngIfは、最初のもので十分です。

Stackblitz

Answer 2

はいそれは

条件付き式の値に基づいてテンプレートを含むNgIfディレクティブを使用して可能です。

ngIfは、expressionがtrueまたはfalseの場合に、式を評価し、thenまたはelseテンプレートを代わりにレンダリングします。典型的には： 異なる値にバインドされていない限り

• 、テンプレートはngIfのインラインテンプレートです。
• その他の場合、テンプレートはバインドされていない限り空白です。以下は

snapcodeです：

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

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

Angular4 ngIfはあなたの詳細を与えるだろう。このplunkerはあなたに役立つ

希望