NgIf 是angular中应用频率十分高的指令，它的作用简略点说就是叛定一个表达式，并依据叛定后果匹配相应模板。

根本用法

<div *ngIf="condition; then thenBlock else elseBlock"></div><ng-template #thenBlock>Content to render when condition is true.</ng-template><ng-template #elseBlock>Content to render when condition is false.</ng-template>

以上语法能够艰深的了解为当表达式condition叛定为true时，应用thenBlock模板内容，否则应用elseBlock模板内容。这是NgIf用法的一种，它还有其它一些更为简洁的用法，具体可见 NgIf API。API中对一些惯例用法曾经介绍的很具体了，根底的用法去看看文档就行了。

 

明天咱们次要来说个NgIf不太惯例的用法。

模板中长期变量

在angular组件模板中，有时候咱们可能会须要定义一个长期变量来晋升性能，比方像上面这个组件：

HTML
<div *ngFor="let item of items || []">    <span [title]="getDisplayText(item)">{{ getDisplayText(item) }}</span></div>
TS
@Component({    selector: 'list',    //...})export class ListComponent {    @Input()    items: Array<any>;    @Input()    displayMember: string;    getDisplayText(item: any): any {        return this.displayMember ? (item && item[this.displayMember]) : item;    }    }

这是一个简略的列表组件，它绑定一个数组，并通过指定的displayMember来设置列表项要显示的文本内容。在组件模板html中，应用span标签包裹每项要显示的文本，并设置其title与显示文本雷同。因为显示文本能够动静设置(displayMember)，所以咱们将相干逻辑放在getDisplayText办法中解决。

仔细一点就会留神到，咱们html模板中为了2处(标签包裹的内容及title)文本显示，调用了2次getDisplayText，但其实2次调用是反复的。这种问题如果在js代码里，定义一个长期变量问题就解决了，然而在angular的组件模板中并没有给咱们提供定义长期变量的指令，这时候咱们明天的配角NgIf就出场了。

NgIf多种用法中有一种是上面这样：

NgIf 其中一种用法
<div *ngIf="condition as value">{{value}}</div>

这句condition as value它能够将一个表达式as到一个变量，并且这个变量在其作用域(节点)范畴内均无效，这相当于变相的为咱们提供了在模板中定义长期变量的能力。

更新后的HTML
<div *ngFor="let item of items || []">    <span *ngIf="getDisplayText(item) as text" [title]="text">{{ text }}</span></div>

当初咱们通过这个变相的长期变量，将原有须要调用2次的办法缩小到了仅调用1次，缩小了不必要的性能损失，这在更为简单的场景中会更加显著。
然而还不能快乐的太早，这里有一个问题，NgIf不论如何应用归根结底它还是会遵循本人的准则，就是叛定表达式，所以问题就是当getDisplayText(item)返回后果叛定为false时，相应的span节点并不会生成。如items其中一项为null或0时，null或0转换为boolean值均叛定为false，所以节点并不会生成，无奈达到咱们显示字符串"0"的预期。

解决办法其实很简略，咱们能够将返回后果封装成对象，因为对象叛定后果将始终为true。

再次更新后的HTML
<div *ngFor="let item of items || []">    <span *ngIf="{ text: getDisplayText(item) } as temp" [title]="temp.text">{{ temp.text }}</span></div>

至此咱们就有了一个绝对完满的模板长期变量。

 

扩大

不仅仅是变相的模板长期变量，扩大一下它还能够做更多事，比方有时候咱们可能会须要在模板的某个节点生成的时候做点什么，它能够为咱们提供一个代码交互机会。

咱们给下面的组件加个数据项绑定事件，将相应定制性能公开给组件使用者。

HTML
<div *ngFor="let item of items || []; let index=index;">    <span *ngIf="getBindingContext(item, index) as ctx" [title]="ctx.text" [style.color]="ctx.textColor">{{ ctx.text }}</span></div>
TS
@Component({    selector: 'list',    //...})export class ListComponent {    @Input()    items: Array<any>;    @Input()    displayMember: string;    getDisplayText(item: any): any {        return this.displayMember ? (item && item[this.displayMember]) : item;    }            // 退出绑定事件    @Output()    itemBinding = new EventEmitter<{ item: any, index: number, textColor?: string }>();    getBindingContext(item: any, index: number): { text: string, textColor?: string } {        let args: { item: any, index: number, textColor?: string } = { item, index };        this.itemBinding.emit(args);        return ({ text: this.getDisplayText(item), textColor: args.textColor });    }    }

当初组件使用者能够通过订阅itemBinding事件来定制每项的文本显示色彩了。

应用1
<list [items]="[{firstName: 'zhang', lastName: 'san'}, {firstName: 'li', lastName: 'si'}]" displayMember="lastName"    (itemBinding)="$event.textColor=$event.item.firstName === 'li' ? 'red': null"></list>
应用2
<list [items]="[0,1,2,3,4,5,6,7]" (itemBinding)="$event.textColor=$event.index%3 === 0 ? 'red': null"></list>