javascript - Hvordan bruke den samme malen i ngIf

Jeg har mange betingelser for å vise den samme malen. For eksempel:

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

Er det mulig å ta disse HTML-elementene:

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

og legg det et sted og kall deretter bare disse HTML-elementene etter navn/referanse i *ngIf? For eksempel:

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

Svar #1

Faktisk har ngIf en 'kul' egenskap, then, som du kan bruke:

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

Siden <template> har blitt utdatert, bruk <ng-template> i stedet eller <ng-container>. Du kan fjerne den andre ngIf i malen da den første er tilstrekkelig.

Stackblitz

Svar #2

Ja, det er mulig ved å bruke NgIf-DIREKTIVET

Inkluderer betinget en mal basert på verdien av et uttrykk.

ngIf evaluerer uttrykket og gjengir deretter enten then- eller else-malen på stedet når uttrykket er sant eller usant. Vanligvis:

  • deretter er malen den innebygde malen til ngIf med mindre den er bundet til en annen verdi.
  • ellers er malen tom med mindre den er bundet.

Nedenfor er snapkode:

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

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

Angular4 ngIf vil gi deg mer detalj.

Håper denne plunkeren vil hjelpe deg

Relaterte artikler