Angular周期方法和双向绑定

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动

数据双向绑定

在vue中我们通过v-model实现数据双向绑定

ng6也是基于MVVM模式实现的框架，因此也支持数据双向绑定，通过ngModel指令

数据双向绑定有两个方向

数据由模型进入视图

通过数据绑定实现的，因此要使用[]语法糖

数据由视图进入模型

通过事件监听实现的，因此要使用()语法糖

所以在ng6中，使用数据双向绑定，要使用两个语法糖: [], ()

由于我们要先绑定事件，再绑定数据，因此使用方式

[(ngModel)]=”demo”

绑定的数据一定要在组件中声明

数据双向绑定ngModel指令，属于对表单元素的操作，因此要安装表单模块FormsModule

在全局模块的imports中，引入该模块

一组表单元素可能会有很多字段，一一获取太麻烦了，如果可以提供一个命名空间，就方便多了

因此我们通常将一组表单数据放在一个变量下。

在ts6中，为了获取这组数据的结构，我们要定义模型类来说明

在组件类中，为数据实例化模型类

举例：

<p>
    <label for="">用户名</label>
    <!-- <input type="text" [(ngModel)]="username"> -->
    <input type="text" [(ngModel)]="data.username">
</p>
<p>
    <label for="">密码</label>
    <!-- <input type="text" [(ngModel)]="password"> -->
    <input type="text" [(ngModel)]="data.password">
</p>
<p>
    <button (click)="showResult()">展示结果</button>
</p>

周期方法

beforeEach 每个单测执行前，执行的方法

afterEach 每个单测执行后，执行的方法

beforeAll 所有单测执行前，执行的方法

afterAll 所有单测执行后，执行的方法

测试机床

ng6中，为了测试组件，提供测试机床 TestBed

通过该方法，可以模拟创建组件，并注入相关信息

单测思想很好，但是前端主要开发页面，因此对于页面效果，一些用户交互等等，单测是无法测试的，所以工作中，我们也常常用单测测试一些业务逻辑。所以相对来说，单测对于前端来说收益不大。