angular 核心概念之三：数据绑定

1 HTML绑定

    {{NG表达式}}
    NG表达式中可以执行哪些代码？
    算数运算 --- 可以
    比较运算 --- 可以
    逻辑运算 --- 可以
    三目运算 --- 可以
    调用函数 --- 可以
    创建对象 --- 不可以，NG表达式中禁止出现new关键字
    JSON序列化 --- 不可以，NG表达式中JSON是undefined

2 属性绑定

    形式1：
        直接在属性上用 {{}} <p title="{{msg}}">信息</p>
    形式2：
        使用[]做属性绑定 <p [title]="msg">信息</p>

3 指令绑定

    在下面指令系统中介绍

4 事件绑定

    <button (click)="printUname()">输出用户名</button>
    注意：事件必须使用()括起来，处理函数后面必须要有()

5 双向数据绑定

    ngMode --- 重点
    方向1：Model => View，模型变则视图变
    方向2：View => Model，视图（表单元素）变则模型变
    <input [(ngModel)]="uname" />
    注意：
        1. 如果想直接监视模型数据的改变，可以绑定ngModelChange事件
        2. ngModel指令不在ComponenModule模块中，而在FormsModule中，使用之前必须在主模块中导入该模块
        
    app.module.ts
    @NgModule({
        imports:[BrowserModule,FormsModule]
    })

2. angular中的指令系统

    (1) 循环绑定：*ngFor
        <p *ngFor="let item of data"></p>
        <p *ngFor="let item of data; let i = index;"></p>
        <p *ngFor="let item of data; index as i"></p>
    (2) 选择绑定：*ngIf
        <p *ngIf="布尔表达式"></p>
        说明：如果布尔表达式为false，则当前元素从DOM树上删除
        <p *ngIf="布尔表达式; else noMore"></p>
        <ng-template #noMore></ng-template>
     (3) 样式绑定：[ngStyle]
         <p [ngStyel]="myStyleObj"></p>
         myStyleObj = {
           backgroundColor: '#383',
           color: '#fff',
           'border-color': '#252'
         }
         说明：ngStyle绑定的值必须是一个对象！对象属性就是css样式名
     （4） 样式绑定：[ngClass]
         <p [ngStyel]="myStyleObj"></p>
         myClassObj = {
           btn: true,
           'btn-danger': true,
           'btn-success': false
         }
         说明：ngClass绑定的值必须是一个对象！对象属性就是CSS class名，属性值为true/false，true的话该class就出现；否则该class不出现

    (5) 了解：特殊的选择绑定
      switch.component.html
        <div [ngSwitch]="userLevel">
          <p *ngSwitchCase="'normal'">欢迎您：普通用户</p>
          <div *ngSwitchCase="'vip'">欢迎我们的贵宾归来</div>
          <h3 *ngSwitchCase="'blackgold'">黑金您好！可以为您服务吗？</h3>
          <span *ngSwitchDefault>您尚未登录</span>
        </div>
      switch.component.ts
          // userLevel = ''
          // userLevel = 'normal'
          // userLevel = 'vip'
          userLevel = 'blackgold'

angular 中的指令分为三类：
    （1）NG中component继承自Directive
    （2）结构型指令：会影响DOM结构，必须使用 * 开头，如*ngIf、*ngFor
     (3) 属性型指令：不会影响DOM树结构，只是影响元素的外观或行为，必须使用[]括起来，如[ngClass],[ngStyle]

3. 自定义指令

创建指令的简单工具 ：ng g directive 指令名 自定义指令都是作为元素属性来使用的(组件时一种特殊的指令)，selector应该是：[指令名]

    <p appXuYaoQiangDiao>新闻</p>
    import { Directive, ElementRef } from '@angular/core';

   xu-yao-qiang-diao.directive.ts
   @Directive({
     selector: '[appXuYaoQiangDiao]'
   })
   export class XuYaoQiangDiaoDirective {
     // 构造方法
     constructor(el: ElementRef) {
       // ElementRef 元素的引用
       console.log('需要强调',el);
       el.nativeElement.style.backgroundColor = '#fcc'
       el.nativeElement.style.padding = '10px'
       el.nativeElement.style.color = '#a33'
     }

   }