数据绑定
往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其他绑定
公众号：前端咖秀
