聊聊angular10中模板如何进行数据绑定？

本篇文章给大家介绍一下angular10模板的数据绑定，带大家了解一下三种绑定语法、模板/插值表达式、属性绑定、样式绑定、事件绑定、双向绑定、内置指令、模板引用变量等等。
绑定语法概览绑定语法归纳起来大概有三种(基础)
model => view (单向：插值、属性绑定、样式绑定)view => model(单向：事件绑定)view 96b4fef55684b9312718d5de63fb7121 model（双向：ngmodule）【相关教程推荐：《angular教程》】
{{expression}}[target]="expression"bind-target="expression"<p> {{ msg }} </p> // 插值表达式<img [src]="heroimageurl"> // 属性绑定<app-hero-detail [hero]="currenthero"></app-hero-detail> // 组件通过属性绑定的方式传参<div [ngclass]="{'special': isspecial}"></div> // 样式绑定<div [class.special]="isspecial">special</div> // class绑定<button [style.color]="isspecial ? 'red' : 'green'"> // style绑定<button [attr.aria-label]="help">help</button> // attribute绑定(target)="statement"on-target="statement"<button (click)="onsave()">save</button> // 元素事件<app-hero-detail (deleterequest)="deletehero()"></app-hero-detail> // 组件事件，用于监听子组件传递过来的参数<div (myclick)="clicked=$event" clickable>click me</div> // 指令事件[(target)]="expression"bindon-target="expression"<input [(ngmodel)]="name"> // 双向数据绑定
html attribute 与 dom property 的对比（很重要，加强理解）
理解 html 属性和 dom 属性之间的区别，是了解 angular 绑定如何工作的关键。attribute 是由 html 定义的。property 是从 dom（文档对象模型）节点访问的
一些 html attribute 可以 1:1 映射到 property；例如，“ id”。某些 html attribute 没有相应的 property。例如，aria-* colspan rowspan。某些 dom property 没有相应的 attribute。例如，textcontent。重要的是要记住，html attribute 和 dom property 是不同的，就算它们具有相同的名称也是如此。在 angular 中，html attribute 的唯一作用是初始化元素和指令的状态。
模板绑定使用的是 property 和事件，而不是 attribute。
编写数据绑定时，你只是在和目标对象的 dom property 和事件打交道。
注意：
该通用规则可以帮助你建立 html attribute 和 dom property 的思维模型：属性负责初始化 dom 属性，然后完工。property 值可以改变；attribute 值则不能。
此规则有一个例外。可以通过 setattribute() 来更改 attribute，接着它会重新初始化相应的 dom 属性。
案例1：input
<input type="text" value="sarah">
当浏览器渲染input时，它会创建一个对应的 dom 节点，其 value property 已初始化为 “sarah”。
当用户在 input 中输入 sally 时，dom 元素的 value property 将变为 sally。但是，如果使用 input.getattribute('value') 查看 html 的 attribute value，则可以看到该 attribute 保持不变 —— 它返回了 sarah。
html 的 value 这个 attribute 指定了初始值；dom 的 value 就是这个 property 是当前值。
案例2：禁用按钮
disabled attribute 是另一个例子。按钮的 disabled property 默认为 false，因此按钮是启用的。
当你添加 disabled attribute 时，仅仅它的出现就将按钮的 disabled property 初始化成了 true，因此该按钮就被禁用了。
<button disabled>test button</button>
添加和删除 disabled attribute 会禁用和启用该按钮。但是，attribute 的值无关紧要，这就是为什么你不能通过编写仍被禁用来启用此按钮的原因。
要控制按钮的状态，请设置 disabled property，
<input [disabled]="condition ? true : false"><input [attr.disabled]="condition ? 'disabled' : null">
模板/插值表达式 {{}} （基础，掌握）模版中除了绑定变量，还能绑定方法
模版中还可以写些简单的逻辑，比如判断或运算
import { component } from '@angular/core';@component({ selector: 'app-root', template: ` <p>变量绑定：{{ title }}</p> <p>方法绑定：{{ getval }}</p> <p>方法绑定：{{ getval2() }}</p> <p>简单运算 {{ 1 + 1 }}.</p> <p>简单运算 {{ price * 0.7 }}.</p> <p>简单运算：{{ gender === 0 ? '男':'女' }}</p> <p>与方法结合 {{ price * 0.7 + getval }}.</p> <p>与方法结合 {{ price * 0.7 + getval2() }}.</p> `,})export class appcomponent { title = "模板绑定"； price = 30; gender = 0; get getval(): number { //es6新语法,函数可以当做变量来使用 return 20; } getval2(): number { return 33; }}
当使用模板表达式时，请遵循下列指南：
非常简单执行迅速没有可见的副作用(即模版中的逻辑不能改变组件的变量)属性绑定（基础，掌握）绑定图片
import { component } from '@angular/core';@component({ selector: 'app-root', template: ` <img src="../assets/images/madao.jpg" alt="madao" /> <img [src]="madaosrc" alt="madao" /> // 推荐 <img bind-src="madaosrc" alt="madao" /> `, styles: []})export class appcomponent { madaosrc = '../assets/images/madao.jpg';}
绑定普通属性
import { component } from '@angular/core';@component({ selector: 'app-root', template: ` <img [src]="user.pic" [alt]="user.name" /> <table class="table-bordered"> <tr> <th>name</th> <th>phone</th> <th>age</th> </tr> <tr> <td>张三</td> <td>13398490594</td> <td>33</td> </tr> <tr> <td [colspan]="colspan">李四</td> // 注意colspan和colspan <td>15079049984</td> <td>22</td> </tr> </table> <button class="btn btn-primary" [disabled]="isdisabled">click</button> `, styles: []})export class appcomponent { madaosrc = '../assets/images/madao.jpg'; user = { name: 'madao', pic: this.madaosrc }; colspan = 2; isdisabled = false;}
绑定自定义属性
import { component } from '@angular/core';@component({ selector: 'app-root', template: ` <span [attr.data-title]="customtitle">一行文字</span> <span [attr.title]="customtitle">test title</span> <span [title]="customtitle">test title</span> `, styles: []})export class appcomponent { madaosrc = '../assets/images/madao.jpg'; customtitle = 'bbb';}
使用插值表达式（不推荐）
插值也可以用于属性，但常规做法还是用中括号[]，建议整个项目保持风格统一
import { component } from '@angular/core';@component({ selector: 'app-root', template: ` <img src="{{ user.pic }}" alt="{{ user.name }}" /> `, styles: []})export class appcomponent { madaosrc = '../assets/images/madao.jpg'; user = { name: 'madao', pic: this.madaosrc };}
样式绑定（属于属性绑定，基础，掌握）绑定单个样式
import { component } from '@angular/core';@component({ selector: 'app-root', template: ` <button type="button" class="btn" [class.btn-primary]="theme === 'primary'">primary</button> <button type="button" class="btn" [class.btn-secondary]="true">secondary</button> <button type="button" class="btn" [class.btn-success]="issuccess">success</button> <button type="button" class="btn" [class.btn-danger]="'啦啦啦'">danger</button> <button type="button" class="btn" [class.btn-danger]="0">danger</button> //false <button type="button" class="btn" [class.btn-danger]="undefined">danger</button> //false `, styles: []})export class appcomponent { theme = 'primary'; issuccess = true;}
绑定多个class
import { component } from '@angular/core';@component({ selector: 'app-root', template: ` <button type="button" [class]="btncls">btncls</button> <button type="button" [class]="btncls2">btncls2</button> <button type="button" [class]="btncls3">btncls3</button>  <button type="button" [ngclass]="btncls">btncls</button> <button type="button" [ngclass]="btncls2">btncls2</button> <button type="button" [ngclass]="btncls3">btncls3</button> `, styles: []})export class appcomponent { btncls = 'btn btn-primary'; btncls2 = ['btn', 'btn-success']; btncls3 = { btn: true, 'btn-info': true };}
绑定单个style
import { component } from '@angular/core';@component({ selector: 'app-root', template: ` <p [style.color]="'#f60'">一段文字</p> <p [style.height]="'50px'" [style.border]="'1px solid'">设置高度</p> <p [style.height.px]="50" [style.border]="'1px solid'">设置高度</p> `, styles: []})export class appcomponent {}
绑定多个style
import { component } from '@angular/core';@component({ selector: 'app-root', template: ` <p [style]="style1">style1</p> <p [style]="style2">style2</p> <p [style]="style3">style3</p>     <p [ngstyle]="style3">style3</p> `, styles: []})export class appcomponent { style1 = 'width: 200px;height: 50px;text-align: center;border: 1px solid;'; style2 = ['width', '200px', 'height', '50px', 'text-align', 'center', 'border', '1px solid']; // 有问题 style3 = { width: '200px', height: '50px', 'text-align': 'center', border: '1px solid' };}
绑定优先级
某个类或样式绑定越具体，它的优先级就越高绑定总是优先于静态属性事件绑定（基础，掌握）基本用法
import { component } from '@angular/core';@component({ selector: 'app-root', template: ` <button type="button" class="btn btn-primary" (click)="onclick()">primary</button> `, styles: []})export class appcomponent { onclick() { console.log('onclick'); } }
事件对象
$event 就是原生的事件对象
import { component } from '@angular/core';@component({ selector: 'app-root', template: ` <button type="button" class="btn btn-primary" (click)="onclick($event)">primary</button> `, styles: []})export class appcomponent { onclick(event: mouseevent) { console.log('onclick', event.target); //直接用event.target.value会报错，要用类型断言 console.log((event.target as htmlinputelement).value) }}
事件捕获或事件冒泡
import { component } from '@angular/core';@component({ selector: 'app-root', template: ` <div style="width:200px;height:200px;background-color:red;" (click)="parentclick()">  <div style="width:100px;height:100px;background-color:blue;" (click)="$event.stoppropagation()"></div> //可以在html使用一些简单的语法 </div> `, styles: []})export class appcomponent { parentclick() { console.log('parentclick'); } chilrenclick(event: mouseevent) { event.stoppropagation(); //阻止事件冒泡 console.log('chilrenclick'); }}
输入输出属性（主要是子传父，通过自定义事件）
输入属性
子组件
import { component, input } from '@angular/core';@component({ selector: 'app-root', template: `<p> today's item: {{item}} </p>`})export class itemdetailcomponent { @input() item: string;}

父组件
import { component } from '@angular/core';@component({ selector: 'app-root', template: ` <app-item-detail [item]="currentitem"></app-item-detail> `,})export class appcomponent { currentitem = 'television';}

输出属性
通过 new eventemitter() 自定义一个事件；调用 eventemitter.emit(data) 发出事件，传入数据；父指令通过监听自定义事件，并通过传入的 $event 对象接收数据。子组件
import { component, output, eventemitter } from '@angular/core';@component({ selector: 'app-root', template: `<label>add an item: <input #newitem></label> <button (click)="addnewitem(newitem.value)">add to parent's list</button>`,})export class itemoutputcomponent { @output() newitemevent = new eventemitter<string>(); //子传父，输出属性 addnewitem(value: string) { this.newitemevent.emit(value); //自定义事件触发 }}
父组件
import { component } from '@angular/core';@component({ selector: 'app-root', template: ` <app-item-output (newitemevent)="additem($event)"></app-item-output> //监听自定义事件 `,})export class appcomponent { items = ['item1', 'item2', 'item3', 'item4']; additem(newitem: string) { this.items.push(newitem); }}
在元数据中声明输入和输出属性
固然可以在 @directive 和 @component 元数据中声明 inputs 和 outputs,但不推荐提供别名
@input()和@output()可以接收一个参数，作为变量的别名，那么父组件中只能用别名绑定
子组件
import { component, input, eventemitter, output } from '@angular/core';@component({ selector: 'app-root', template: `<p> today's item: {{item}} </p>`})export class itemdetailcomponent { @input('aliasitem') item: string; @output('newitem') newitemevent = new eventemitter<string>(); addnewitem(value: string) { this.newitemevent.emit(value); }}
父组件
import { component } from '@angular/core';@component({ selector: 'app-root', template: ` <app-item-detail [aliasitem]="currentitem" //注意是绑定的别名 (newitem)="additem($event)"></app-item-detail> //注意是监听的别名 `,})export class appcomponent { currentitem = 'television'; items = ['item1', 'item2', 'item3', 'item4']; additem(newitem: string) { this.items.push(newitem); }}
输入属性一定要用中括号[]绑定？
如果绑定的值是静态的，就不需要[]；为了统一风格尽量用上[]
import { component } from '@angular/core';@component({ selector: 'app-root', template: ` <app-item-detail item="static item"></app-item-detail> `,})export class appcomponent { // currentitem = 'television';}

双向绑定（基础，掌握）先决条件
组件的属性绑定组件的事件绑定输入和输出（父子组件通信）基本的双向绑定
子组件
import {component, oninit, changedetectionstrategy, eventemitter, input, output} from '@angular/core';@component({ selector: 'app-sizer', template: ` <div> <button class="btn btn-danger" (click)="dec()" title="smaller">-</button> <button class="btn btn-primary" (click)="inc()" title="bigger">+</button> <label [style.font-size.px]="size">fontsize: {{size}}px</label> </div> `, styles: [ ], changedetection: changedetectionstrategy.onpush})export class sizercomponent implements oninit { @input() size: number | string; // 想要用双向绑定语法，output变量名就一定是输入属性名加上change @output() sizechange = new eventemitter<number>(); constructor() { } ngoninit(): void { } dec() { this.resize(-1); } inc() { this.resize(+1); } resize(delta: number) { this.size = math.min(40, math.max(8, +this.size + delta)); this.sizechange.emit(this.size); }}
父组件
import { component } from '@angular/core';@component({ selector: 'app-root', template: ` <app-sizer [(size)]="fontsizepx"></app-sizer> <div [style.font-size.px]="fontsizepx">resizable text</div> `,})export class appcomponent { fontsizepx = 16;}
双向绑定工作原理
为了使双向数据绑定有效，@output() 属性的名字必须遵循 inputchange 模式，其中 input 是相应 @input() 属性的名字。例如，如果 @input() 属性为 size ，则 @output() 属性必须为 sizechange 。
上面的 sizercomponent 具有值属性 size 和事件属性 sizechange。 size 属性是 @input()，因此数据可以流入 sizercomponent 。 sizechange 事件是一个 @output() ，它允许数据从 sizercomponent 流出到父组件。
上面例子，有两个方法， dec() 用于减小字体大小， inc() 用于增大字体大小。这两种方法使用 resize() 在最小/最大值的约束内更改 size 属性的值，并发出带有新 size 值的事件。
简写形式
双向绑定语法是属性绑定和事件绑定的组合的简写形式
<app-sizer [size]="fontsizepx" (sizechange)="fontsizepx=$event"></app-sizer>
表单中的双向绑定
因为没有任何原生 html 元素遵循了 x 值和 xchange 事件的命名模式，所以与表单元素进行双向绑定需要使用 ngmodel
基本使用
根据之前基本的双向绑定知识，[(ngmodel)]语法可拆解为：
名为ngmodel的输入属性名为ngmodelchange的输出属性使用[(ngmodule)]双向绑定的前提条件是在模块中引入formsmodule
import {component} from '@angular/core';@component({ selector: 'example-app', template: ` <input [(ngmodel)]="name" #ctrl="ngmodel" required> <p>value: {{ name }}</p> <p>valid: {{ ctrl.valid }}</p> <button (click)="setvalue()">set value</button> `,})export class simplengmodelcomp { name: string = ''; setvalue() { this.name = 'nancy'; }}
<input [(ngmodel)]="name" />上面这行代码相当于：<input [value]="name" (input)="name = $event.target.value" />
在表单中的使用
表单中使用[(ngmodel)]，需要做下面两件事的其中之一
给控件加上name属性将ngmodeloptions.standalone设为true<form> <input [(ngmodel)]="value" name="name" /> <input [(ngmodel)]="value" [ngmodeloptions]="{ standalone: true }" /></form>
注意：表单中使用双向数据绑定，知识点比较多，这里只做简单了解，后续会出专门章节探讨
内置指令循环指令 *ngfor （非常基础，掌握）
arr:string[] = ['张三','李四','王五']; trackbyitems(index: number, item: item): number { return item.id; }<div *ngfor="let item of arr; let i=index" (click)='chosethis(item,i)'> 索引值：{{i}} -- 内容：{{item}}</div>//trackby一般和长列表一起使用，减少dom替换次数，提升性能<div *ngfor="let item of items; trackby: trackbyitems"> ({{item.id}}) {{item.name}}</div>
条件渲染 *ngif ngstyle ngclass ngswitch（非常基础）
isshow: boolean = true;personstate: number = 2;//频繁切换不建议用，频繁加载和移除有较高的性能消耗（重要）<p *ngif="isshow">命令模式</p> // 不频繁切换推荐用<p [hidden]="isshow">命令模式</p> // 频繁切换推荐用currentstyles = { 'font-style': this.cansave ? 'italic' : 'normal', 'font-weight': !this.isunchanged ? 'bold' : 'normal', 'font-size': this.isspecial ? '24px' : '12px'};<div [ngclass]="isspecial ? 'special' : ''">ngclass</div><div [ngstyle]="currentstyles"> ngstyle</div>// 使用样式有2种（style.dispaly 和 class.hidden）<p [style.display]="isshow?'block':'none'">style模式</p> //频繁切换建议用样式<p [class.hidden]="isshow">class模式</p>//匹配多种情况的条件渲染，跟vue的v-if/v-else-if/v-else类似//适合多种状态，显示一种的情况<div [ngswitch] = 'personstate'> <div *ngswitchcase="1">工作</div> <div *ngswitchcase="2">吃饭</div> <div *ngswitchdefault>睡觉</div></div>
双向数据绑定指令 [(ngmodel)]
//angular不能直接识别ngmodel，需要通过引入模块formsmodule来访问import {formsmodule} from '@angular/forms';imports: [formsmodule]public name = "张三";<input [(ngmodel)] = "name" type="text"> //人工绑定，更好的做法是通过响应式表单绑定<input bindon-change="name" type="text"> //备选//属性绑定+事件绑定 = ngmodel （重要）<input [value]="name" (input)="name=$event.target.value" >
模板引用变量基本使用
使用井号（#）声明模板引用变量，可以获取dom 元素、指令、组件、templateref 或 web component。
import {component} from '@angular/core';@component({ selector: 'app-tpl-var', template: ` <input #phone placeholder="phone number" /> <button (click)="callphone(phone.value)">call</button> `,})export class tplvarcomponent { constructor() { } callphone(value: string) { console.log('callphone', value); }}
ref
还有种写法就是ref, 下面两种写法是一样的
<input #fax placeholder="fax number" /><input ref-fax placeholder="fax number" />
引用组件
在组件章节，介绍了获取子组件的属性和方法，有两种方法：本地变量和@viewchild()
import {component} from '@angular/core';@component({ selector: 'app-tpl-var', template: ` <div class="demo-sec"> <button class="btn btn-primary" (click)="sizer.inc()">app inc</button> <app-sizer [(size)]="size" #sizer></app-sizer> size: {{ size }} </div> `,})export class tplvarcomponent { size = 16; constructor() { }}
输入和输出输入属性
子组件
import { component, input } from '@angular/core';@component({ selector: 'app-root', template: `<p> today's item: {{item}} </p>`})export class itemdetailcomponent { @input() item: string;}

父组件
import { component } from '@angular/core';@component({ selector: 'app-root', template: ` <app-item-detail [item]="currentitem"></app-item-detail> `,})export class appcomponent { currentitem = 'television';}

输出属性
子组件
import { component, output, eventemitter } from '@angular/core';@component({ selector: 'app-root', template: `<label>add an item: <input #newitem></label> <button (click)="addnewitem(newitem.value)">add to parent's list</button>`,})export class itemoutputcomponent { @output() newitemevent = new eventemitter<string>(); addnewitem(value: string) { this.newitemevent.emit(value); }}
父组件
import { component } from '@angular/core';@component({ selector: 'app-root', template: ` <app-item-output (newitemevent)="additem($event)"></app-item-output> `,})export class appcomponent { items = ['item1', 'item2', 'item3', 'item4']; additem(newitem: string) { this.items.push(newitem); }}
在元数据中声明输入和输出属性
固然可以在 @directive 和 @component 元数据中声明 inputs 和 outputs,不推荐提供别名。
@input()和@output()可以接收一个参数，作为变量的别名，那么父组件中只能用别名绑定子组件
import { component, input, eventemitter, output } from '@angular/core';@component({ selector: 'app-root', template: `<p> today's item: {{item}} </p>`})export class itemdetailcomponent { @input('aliasitem') item: string; // decorate the property with @input() @output('newitem') newitemevent = new eventemitter<string>(); addnewitem(value: string) { this.newitemevent.emit(value); }}
父组件
import { component } from '@angular/core';@component({ selector: 'app-root', template: ` <app-item-detail [aliasitem]="currentitem" (newitem)="additem($event)"></app-item-detail> `,})export class appcomponent { currentitem = 'television'; items = ['item1', 'item2', 'item3', 'item4']; additem(newitem: string) { this.items.push(newitem); }}
输入属性一定要用中括号[]绑定？
如果绑定的值是静态的，就不需要[]
import { component } from '@angular/core';@component({ selector: 'app-root', template: ` <app-item-detail item="static item"></app-item-detail> `,})export class appcomponent { // currentitem = 'television';}

管道（基础，掌握）常用的管道
1、大小写字母转换
str = 'hello';str1 = 'world';<p>{{str | uppercase}}-{{str1 | lowercase}} </p> //str:hello str1:world
2、日期格式化（经常使用）
today = new date();<p>现在的时间是{{today | date:'yyyy-mm-dd hh:mm:ss'}}</p>
3、保留小数后面多少位下面例子的含义是，3表示最少几位整数，后面的2-4表示最少最少2位小数，最多4位小数，不足补零，小数会四舍五入。
num = 125.156896;<p>num保留4位小数的值是：{{num | number:'3.2-4'}}</p> //125.1569
4、货币转换
count = 5;price = 1.5;<p>数量：{{count}}</p> // 数据：5<p>价格：{{price}}</p> // 价格：1.5<p>总价：{{(price * count) | currency:'￥'}}</p> // 价格：￥7.5
5、字符串截取
name = '只对你说';<p>{{name | slice : 2 : 4}}</p> // 你说
6、json格式化(有时需要看一下数据)
<p>{{ { name: 'semlinker' } | json }}</p> // { "name": "semlinker" }
自定义管道
1、创建管道文件
ng g pipe /piper/mypiper
2、在管道文件中写自己的逻辑transform两个参数分别表示传入值和参数
import { pipe, pipetransform } from '@angular/core';@pipe({ name: 'multiple'})export class mypiperpipe implements pipetransform { transform(value: any, args?: any): any { //value:输入值 args:参数 if(!args){//无参的情况下 args = 1; } return value*args; }}
注意：通过命令行生成的管道（过滤器），会自动在全局声明；管道传入的参数是在'：'冒号后面表示
更多编程相关知识，请访问：编程视频！！
以上就是聊聊angular10中模板如何进行数据绑定？的详细内容。

聊聊angular10中模板如何进行数据绑定？

VIP推荐