数据绑定

往AppComponent.ts中添加两个属性:title属性用来显示应用名称，hero属性用来显示英雄名称

export class AppComponent{
  title = 'my first angular project';
  hero = 'yolanda';
}

更新@Component装饰器中指定的模版，为这些新属性建立数据绑定

template:'<h1>{{title}}</h1><h2>{{hero}} details!</h2>'

双括号是angular差值表达式绑定语法，它表示组件的属性title和hero的值会作为字符串插入到html标签中

hero对象

把hero从一个字符串字面量变成一个类,
创建一个Hero类，它具有id和name属性，下面是app.component.ts

import {Component} from @angular/core;
export class Hero{
  id : Number;
  name : String;
}
@Component({
  selector:'app-root',
  template:'.<h1>{{title}}</h1><h2>{{hero}} details!</h2>',
  styleUrls:'./app.component.css'
})
export class appComponent{
 title = 'Tours of heros';
 hero : Hero = {
    id: 1,
    name : 'yolanda'
 }
}

我们把hero从字符串变成了对象，也得更新模版中的绑定表达式，来引用hero中的name属性
下面是app.component.html

template:'.<h1>{{title}}</h1><h2>{{hero.name}} details!</h2>'

多行模版显示

反括号

template:`
<h1>title:{{title}}</h1>
<h2>hero:{{hero.name}}</h2>
`

双向数据绑定

重构app.component.ts的模版

<div style="text-align:center">
  <h1>
    {{title}}!
  </h1>
  <h2>{{hero.name}} detail!</h2>
  <label>name:</label>
  <input [(ngModel)]="hero.name" placeholder="name">
</div>

ngModel是一个有效的指令，它默认情况下是不可用的，它属于一个可选模块FormsModel
需要在app.module.ts中import

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms'; 添加这一行

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule 在这里引入
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

总结

• {{}}花括号插值表达式（单向数据绑定的一种形式）
• 使用ES2015模版字符串(反引号)写了一个多行模版
• 为了同时显示和修改英雄名字，使用了内置指令ngModel，往input元素上添加了双向设计绑定
• ngModel指令将修改传播到每一个hero.name其他绑定

公众号：前端咖秀