Angular 内置属性型指令

Angular内置属性型指令

属性型指令会监听和修改其他HTML元素或组件的行为、元素属性（Attribute）、DOM属性(Property)。他们通常会作为HTML属性的名称而应用在元素上。

更多Angular模块，比如：RouterModel和FormsModule都定义了自己的属性型指令。

几个常用的属性型指令：

1.NgClass--添加或移除一组CSS类

2.NgClass---添加或移除医嘱CSS样式

3.NgModel---双向绑定到HTML表单元素。

一、NgClass

我们经常用用到添加或删除CSS类的方式来控制元素如何显示。通过绑定NgClass，可以同时添加或移除多个类。

1.CSS类绑定 ，添加或删除单个类的最佳途径

<div [class.alert]="isAlert" [class.alert-success]="isSuccess">
  这是alert信息展示
</div>

  isAlert = true;
  isSuccess = true;

2.NgClass 同时添加或移除多个CSS类

<div [ngClass]="classList">
  ngClass指令使用
</div>

    this.classList = {
      alert: this.isAlert,
      ["alert-success"]: this.isSuccess,
      ["fade in"]: this.isAlert
    };

注意：

  changeOne() {
    //此处修改this.isAlert属性，不会级联修改 this.classList中的值
    this.isAlert = !this.isAlert;
    this.isSuccess = !this.isSuccess;
  }

二、NgStyle

我们可以根据组件的状态动态设置内联样式。NgStyle 绑定可以同时设置多个内联样式。

1.样式绑定 是设置单一样式的简单方式

  <div class="tab-pane active" id="one">
    <p [style.color]="isSuccess?'green':'red'"
    [style.font-size]="isSuccess?'bold':'lighter'">这是标签one</p>
  </div>

2.NgStyle 需要绑定到一个key:value控制对象。

对象的每个key是样式名，balue是样式的值。

    <p [ngStyle]="styleList">
      这是标签two 
    </p>

    this.styleList={
      'font-weight':'bold',
      'font-size':'30px',
      color:'red'
    }

三、NgModel 

使用[(ngModel)] 双向绑定到表单元素

<input [(ngModel)]="currentHero.name">

1.使用ngModel时需要FormsModule，使用之前㤇导入该模块
导入FormsModul代码示例：

import { NgModule } from '@angular/core';
import { BrowserModule }  from '@angular/platform-browser';
import { FormsModule } from '@angular/forms'; // <--- JavaScript import from Angular

/* Other imports */

@NgModule({
  imports: [
    BrowserModule,
    FormsModule  // <--- import into the NgModule
  ],
  /* Other module metadata */
})
export class AppModule { }

2.ngModel绑定优于绑定到该元素的原生属性
ngModuleChange 可以监听修改后的值,$event用于用户获取修改后的值，

也就是用户的修改触发ngModelChange

<div class="panel panel-primary">
  <div class="panel-heading">
    <div class="panel-title">NgModel 双向绑定示例1</div>
  </div>
  <div class="panel-body">
    <form>
      <div class="form-group">
        <label for="" class="content-label">
          姓名:
        </label>
        <input type="text" class="form-control" name="Name"
         [(ngModel)]="hero.Name"
         (ngModelChange)="setUpper($event)">
      </div>

      <div class="alert alert-success">
        {{hero|json}}
      </div>
    </form>
  </div>
</div>

更多：

Angular 内置结构型指令
Angular模板引用变量（#var）

Angular管道操作符(|)