angular ：ngIf 的else用法

77 阅读 0 评论 51 点赞

我是靠谱客的博主朴素跳跳糖，最近开发中收集的这篇文章主要介绍angular ：ngIf 的else用法，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

1.首先我们看一下 *ngIf的用法

 <div *ngIf="display"> hello world </div>

在display为true 的时候，会显示 hello world,如果想要在为false的时候展现另一个内容的时候时候呢？

 <div *ngIf="!display"> world</div>

虽然上种写法可以达到需求，但相对麻烦点，这时候我们可以使用 *ngIf ；else 的写法，

2.ngIf 的else 的使用

可以使用一个不会展示在内容上的<ng-template></ng-template>区块

 <div *ngIf="isMobile; else notMobile">close</div>
                <ng-template #notMobile>
                 <div> menu</div>
                </ng-template>

这个时候当ngIf逻辑为false 时，notMobile这个<ng-template>内的 <div>menu</div>来取代close，就可以达到else 的效果了。

你以为这样就结束了吗？No No No

3. 在一个模版中可以共用ng-template

上文提到的是一个简单的else使用场景，在事实上，多个ngIf的else 可以共用同一个ng-template;

 <div *ngIf="isMobile; else notMobile">close</div>
<div *ngIf="isOpen; else notMobile">open</div>
        <ng-template #notMobile>
                 <div> menu</div>
          </ng-template>

上述过程中，我们只建立一个<ng-template>并且只有一个 notMobile,当模版内的其他地方有else 需求时，都可以使用notMobile里的内容，就不用为每个*ngIf都建立一个<ng-template>。