[英]How to use the same template in ngIf
I have many conditions to show the same template. 我有很多条件来显示相同的模板。 For example:
例如:
<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>
Is it possible to take this html elements: 是否可以采用这个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>
and put somewhere and then just call this html elements by name/reference in *ngIf
? 并放在某处,然后在
*ngIf
按名称/引用调用此html元素? For example: 例如:
<template [ngIf]="item.url.indexOf('http') == 2">
<!--reference to the repeatable code-->
</template>
Actually ngIf has a 'cool' attribute, then
, that you could make use of: 实际上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>
As <template>
has been deprecated, use <ng-template>
instead or <ng-container>
. 如
<template>
已被弃用,使用<ng-template>
代替或<ng-container>
。 You can remove the second ngIf
in the template as the first is sufficient. 您可以删除模板中的第二个
ngIf
,因为第一个就足够了。
Yes it is possible using NgIf DIRECTIVE 是的,可以使用NgIf DIRECTIVE
Conditionally includes a template based on the value of an expression. 有条件地包括基于表达式值的模板。
ngIf evaluates the expression and then renders the then or else template in its place when expression is truthy or falsy respectively. ngIf计算表达式,然后当表达式分别为真或假时,将then或else模板呈现在其位置。 Typically the:
通常是:
Below is snapcode: 下面是snapcode:
<div *ngIf="condition; then thenBlock else elseBlock"></div>
<ng-template #thenBlock></ng-template>
<ng-template #elseBlock></ng-template>
Angular4 ngIf will give you more detail. Angular4 ngIf将为您提供更多细节。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.