angular内置指令

2022.4.1

常用angular内置指令

1.ngModel

这个指令就是实现数据绑定的，不过有三种写法和意思

第一种—— ngModel :

html:
 <input type="text" ngModel="msg" name="msg" />
ts:
msg: any = 'I m MSG'; 

这中直接使用的方式意味着不是绑定到在ts中定义的 msg的值，而是在前台直接赋值给当前使用 ngModel指令的元素。

未改变前

添加了点击事件，点击后会改变ts中msg的初始值，

点击改变后

我们发现，在改变ts的msg后，使用了ngModel的内容并没有改变，而使用其他方式绑定了msg的元素发生看改变

**

结论:第一种方式是一次性的单项数据

**

第二种:[ngModel]

<input type="text" [ngModel]="msg" name="msg" />

未改变前

能够获取绑定的值，接下来直接进行输入改变，看下面是否能实时显示变化

发现并没有实时变化，
我们再来通过点击事件来试试

点击后

我们发现都改变了

结论： [ngModel] 是单项数据绑定，实时更改后并不会影响到ts中绑定的原值，

第三种： [(ngModel)]

<input type="text" [(ngModel)]="msg" name="msg" />

来看看初始效果，都能得到绑定的值

接下来试试输入框实时修改

可以发现都改变了值，接下来通过点击事件来试试

同样发生了改变，这样我们可以看出来，ngModel的第三种写法才是实现了双向数据绑定，这种的也是常用的方式

注意点:在input text 中使用ngModel的时候一定要加上name值，name尽量不要重复

2. *ngFor的用法

就我举的例子来说，用法是这样的

html:
 <div *ngFor="let item of newArr; let i = index">
      {{ item.name }}----{{ item.val }}
      <button (click)="delArr(i)">删除</button>
ts:
newArr = [];
 </div>

在外层数据中使用*ngFor，绑定到要展示的数据

我这是动态追加对象到数组中，形成数组对象，因为一般的后台反馈数据是这样的格式
注意是 of 的循环，相当于 for of，其中定义的item的值就是所有的key值,先来看看我们需要循环的数据

因为item的值是key，所有需要通过打点的方式获取对应的值，也就是item.val和item.name；
效果如图

3.*ngIf

*ngIf的指令是绑定的值为true时才显示，为false时将绑定的元素从Dom移除，直接操作Dom的

html
<div *ngIf="checkbox">
    <p>我是*ngIf为true时</p>
  </div>
ts
// ngIf测试
  checkbox = true;

初始值为true时显示

点击切换隐藏后，我取的是反值

再次点击

我们可以发现，绑定了ngIf的元素，值为true时显示，为false则不显示，但是需要注意的是，如果在项目中频繁的使用ngIf操作元素的显示和消失，对dom的操作较为频繁的话，可能会对用户的浏览造成一定的影响

*ngIf else 语句
这个需要用到ng-template。
啥意思呢，就是if判断为真的时候，显示为数据为真的展示样式
否为显示else的数据样式

<!-- 测试*ngIf else -->
  <div *ngIf="msg; else nullMsg"></div>
  <ng-template [ngIf]="msg">
    <div class="NowMsg">
      {{ msg }}
    </div>
  </ng-template>
  <ng-template #nullMsg>
    <div class="nullMsg">msg当前为空</div>
  </ng-template>

这个意思就是 if else的写法，很容易理解，我在输入框右侧的按钮位置位置设置了一个按钮，逻辑是点击添加后数据哦push到空数组中，然后情况msg的值，这样由于空值是false，则会显示else的内容，否则显示true的内容，
但是不管是if的内容还是else的内容，都需要用 nb-template来绑定，为真为假都需要绑定，为真的时候需要用 [ngIf] = msg(绑定值名)，为else时要通过 # nullMsg(自定义else绑定值)

初始效果

输入后的效果

4. 动态样式绑定—ngClass

html
  <div [ngClass]="isStyle ? 'special_1' : 'special_2'">
 	 ngClass测试
  </div>
 ts
  // ngClass
  isStyle = true;

三元表达式判断其元素的class名，判断的是自由发挥的

例如

 <div [ngClass]="1 + 1 == 2 ? 'special_1' : 'special_2'">
	 ngClass测试
 </div>

5.不同数据显示不同分支 ng-switch

html
<input [(ngModel)]="allSw" name="allSw" />
  <div [ngSwitch]="allSw">
    <div *ngSwitchCase="1">  //如果是字符串则需要这样 *ngSwitchCase="'test1'"
      <p>我是{{ allSw }}的内容</p>
    </div>
    <div *ngSwitchCase="2">
      <p>我是{{ allSw }}的内容</p>
    </div>
    <div *ngSwitchDefault>
      <p>我是啥都没有</p>
    </div>
  </div>
  ts
    // ngSwitch
  	allSw = 1;  //字符串和数字都可

默认为1时的效果:

为2时的效果

其他值的效果

可以得出这个很好用，但是要注意语法，一定要在使用了[ngSwitch]这个指令的元素中使用 *ngSwitchCase 和 *ngSwitchDefault

个人想法:
1.双向数据绑定 — ngModel: 这个和vue比起来的话，第二种写法是angular的bind绑定，第三种是v-model
2.动态循环数据— *nbFor ：angular的循环是 for of 循环，Vue常用 for in 循环，也可以用 of，用 of 循环数据最好。
3.ngIf:这个和vue比起来确实使用上不如vue方便，vue的v-if中科院添加三元表达式来判断是否是true和false，而ngIf直接自己将绑定的基础类型进行转换了，而else的显示也确实有点麻烦，还要通过nb-templat包裹，
4.ngClass：这个没啥好说的，vue的写法是 :style,语法不同而已
5ng-switch：这个方便展示多种不同返回值的数据样式，并且只显示当前那一条数据的元素

总结:都说angular适用于大型项目开发，例如后台的管理系统，的确，目前我的看法是，这个要得益于angular项目在使用命令行创建组件的时候会自动创建四个文件，一个文件代表一个模块功能，然后可以使用公共组件的时候传值方便，有点还是有的，相比较vue来说，大型项目的话vue也不会差，因为我感觉vue还是比angular使用起来更灵活，但是我使用下来，继续学习angular吧，不过止步于后台管理系统使用他，万事开头难，加油。