Angular2 模板语法数据绑定

Angular2的模板语法大体上与html一致,功能上增加了数据绑定以及一些控制dom的小功能。
数据绑定主要有以下几种:
1. 插值绑定
2. property绑定
3. attribute绑定
4. class绑定
5. style绑定
6. 事件绑定
7. 局部变量绑定
8. ngModel
9. ngSwitch
10. ngFor
11. ngForTrackBy

其他功能:
1. 管道操作符
2. 安全导航操作符
3. others…

数据绑定方向:

数据方向 语法 绑定类型
从数据源到视图 {{expression}}
[target] = "expression"
bind-target = "expression"
插值表达式
Property
Attribute
Class
Style
从视图到数据源 (event) = "method(event)"
on-event = "method"
$event可以不传
事件
双向 [(target)] = "expression"
bindon-target = "expression"
双向

Property 和 Attribute区别

Property和Attribute中文都叫属性,但这两者是有区别的。
Property由Dom定义,Attribute由HTML定义。
* 少量 HTML attribute 和 property 之间有着 1:1 的映射,如id
* 有些 HTML attribute 没有对应的 property,如colspan
* 有些 DOM property 没有对应的 attribute,如textContent
* 大量 HTML attribute看起来映射到了property…… 但却不像我们想的那样!

Dom property由attribute初始化,一旦初始化完成,attribute就没有用了。attribute的值不能改变,但property却可以。

就算名字相同,HTML attribute 和 DOM property 也不是同一样东西。

模板绑定是通过 property 和事件来工作的,而不是 attribute。

NgModel

NgModel适用表单的双向绑定,其原理是封装了value property的单向绑定和input事件。
ngModel还有展开形式,用于手工处理用户输入的数据:

<input
  [ngModel]="currentHero.firstName"
  (ngModelChange)="setUpperCaseFirstName($event)">

demo:
TemplateComponent:

import {Component, OnInit, ChangeDetectionStrategy, AfterViewInit} from '@angular/core';

@Component({
  selector: 'app-template',
  templateUrl: './template.component.html',
  styleUrls: ['./template.component.css'],
  changeDetection:ChangeDetectionStrategy.Default
})
export class TemplateComponent implements OnInit,AfterViewInit {
  ngAfterViewInit(): void {
    //更新时间
    setInterval(()=>{
      this.currentDate=new Date();
    },1000);
  }
  title="template title";
  inputType="text";
  clickCount=0;
  currentDate=new Date();
  obj:any;
  inputText="";
  toeChoice="Moe";
  array=[];

  constructor() { }

  ngOnInit() {
    // this.obj={};
    // this.obj.title="adffs";
    this.array.push({title:'aaaa',id:1});
    this.array.push({title:'bbbb',id:2});
    this.array.push({title:'cccc',id:3});
    this.array.push({title:'dddd',id:4});
    this.array.push({title:'eeee',id:5});

  }

  isBlue() {
    return false;
  }
  clickEvent(event) {
    event.currentTarget.value="点击 "+(++this.clickCount);
  }

  ngStyle() {
    let styles = {
      // CSS property names
      'font-style':  'italic',
      'font-weight': 'bold',
      'font-size':  '2rem',
    };
    return styles;
  }

  trackByObj(index:number,obj:any) {
    return obj.id;
  }
}

模板:

<p>
  <label>插值绑定:</label><span>{{title}}</span>
</p>

<p>
  <label [title]="title">property绑定</label>
</p>

<p>
  <label>attribute绑定:
    <tr>
      <td [attr.colspan]="1 + 1">Three-Four</td>
    </tr>
  </label>
</p>

<p>
  <label [class.blue]="isBlue()">CSS class绑定,当isBlue()返回true时,加载css类blue</label>
</p>
<p>
  <label [ngClass]="{blue: true}">NgClass</label>
</p>

<p>
  <label [style.color]="isBlue()?'blue':'red'">CSS style绑定</label>
</p>
<p>
  <label [ngStyle]="ngStyle()">NgStyle</label>
</p>
<p>
  <label>事件绑定:<input type="button" (click)="clickEvent($event)" value="点击事件绑定"/><span>event可以不传</span> </label>
</p>

<p>
  <label>局部变量:<input type="text" #input1 (input)="null"/><span>{{ input1.value }}</span>
    此处必须增加一个事件,否则因为value改变没有触发事件,不会实时更新,但类似这样的需求,ngModel更适合</label>
</p>

<p>
  <label>管道操作符:{{currentDate | date: "yyyy-MM-dd HH:mm:ss"}}</label>
</p>
<p>
  <label>安全导航操作符:{{obj?.title}}</label>
</p>

<p>
  <label>NgModel:<input type="text" [(ngModel)]="inputText"/><span>{{ inputText }}</span></label>
</p>
<p>
  <label>NgIf:<span *ngIf="inputText">Hello, {{inputText}}</span></label>
</p>
<p>
  <label>NgSwitch:
    <span [ngSwitch]="toeChoice">
      <span *ngSwitchCase="'Eenie'">Eenie</span>
      <span *ngSwitchCase="'Meanie'">Meanie</span>
      <span *ngSwitchCase="'Miney'">Miney</span>
      <span *ngSwitchCase="'Moe'">Moe</span>
      <span *ngSwitchDefault>other</span>
    </span>
  </label>
</p>

<p>
  <label>NgFor:
    <div *ngFor="let obj of array;let i=index">{{i + 1}} - {{obj.title}}</div>
  </label>

</p>

<p>
  <label>NgForTrackBy:
    <div *ngFor="let obj of array;trackBy:trackByObj">{{obj.title}}</div>
  </label>

</p>

css:

p {
  font-size: 1.3rem;
}
.red {
  color: red;
}
.blue {
  color:blue;
}

© 2017, 冰冻鱼. 请尊重作者劳动成果,复制转载保留本站链接! 应用开发笔记