前端（vue）入门到精通课程：进入学习
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API调试工具：点击使用
绑定语法概览
绑定语法归纳起来大概有三种(基础)
- model => view (单向：插值、属性绑定、样式绑定)
- view=> model(单向：事件绑定)
- view <=> model（双向：ngModule）
【相关教程推荐：《angular教程》】
<!-- model => view -->{{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绑定<!-- view=> model -->(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> // 指令事件<!-- view <=> model -->[(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><!-- 也可以用内置指令ngClass --><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><!-- 也可以用内置指令ngStyle, 但不推荐，以后可能会弃用 --><!--<p [ngStyle]="style1">style1</p>--><!--<p [ngStyle]="style2">style2</p>--><!-- ngStyle只接收对象 --><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)="chilrenClick($event)"></div>--><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 ngStylengClassngSwitch（非常基础）
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中模板如何进行数据绑定？的详细内容，更多请关注php中文网其它相关文章！
官方QQ群：
开源地址：
在线留言：