5.1数据绑定、响应式编程和管道

angular提供的数据绑定：

  • 插值表达式：使用插值表达式将一个表达式的值显示在模板上。示例：

      <h1>{{productTitle}}<hi>

  • 属性绑定：使用方括号将一个表达式的值赋给Html标签的一个属性。示例：

      <img [src] ="imgUrl">

  • 事件绑定：使用小括号将组件控制器的一个方法指定为模板中事件的处理器。示例：

      <button (click)="toProductDetail">商品详情</button>

  • 双向绑定：使用“[(ngModel)]”将控制器和模板关联起来，任何一方的改变都会引起另一方的改变。示例：

      <input [(ngModel)]="name">

使用插值表达式（控制器→模板DOM属性）

<h1>{{productTitle}}</h1>
<h1>{{表达式}}</h1>

注意：angular会将“插值表达式”翻译为“属性绑定” 等价于

属性绑定

html属性和dom属性的区别

当浏览器渲染界面时，会为html标签生成一个类型为HTMLElement的Dom节点，每个dom都有自己的属性和方法。如input标签生成domInputElement

属性

描述

获取方式

html属性

不可变，其值为初始值

event.target.value

dom属性

可变，其值为当前值

event.target.getAttribute('value')

HTML属性和DOM属性的关系

  • 少量HTML属性和DOM属性之间有着1：1的映射，如id

  • 有些HTML属性没有对应的DOM属性，如colspan

  • 有些DOM属性没有对应的HTML属性，如textContent

  • 就算名字相同，HTML属性和DOM属性也不是同一样东西

  • HTML属性的值指定了初始值，DOM属性的值表示当前值。

  • HTML属性的值不能改变，DOM属性的值可以改变。

  • 模板绑定使用DOM属性和事件来工作的，而不是Html属性

实战：为一个input标签设置“value”属性并添加“input”事件，“value”属性值为“初始值”，“input”事件将触发控制器的onInput()方法打印出标签的Html属性和Dom属性值

  • 模板代码

    <input value="初始值" (input)="onInput($event)">

  • 控制器代码

      onInput(event: any): void {
    console.log(event);
    console.log('dom属性value值：' + event.target.value);
    console.log('html属性value值：' + event.target.getAttribute('value'));
  }

DOM属性绑定（控制器→模板DOM属性）

angular中常使用的是DOM属性绑定。

HTML属性绑定（控制器→模板HTML属性）

当某些标签的HTML属性没有与之对应的DOM属性时，需要使用HTML属性绑定。例如table标签colspan只有HTML属性而没有DOM属性。

  • 基本Html属性绑定

    <td [attr.colspan]="size">...</td>
<td [attr.HTML属性]="控制器属性">...</td>

  • css类绑定

    <div class="xxx yyy" [class]="someExprission">...</div>
    <div [class.special]="isSpecial">...</div>
<div [class.css类名]="布尔值">...</div>
    <div [ngClass]="{xxx:isX,yyy:isY}"></div>
<div [ngClass]="{css类：表达式true或false}"></div>

  • 样式绑定

    <button [style.color]="isSpecial?'red':'green' ">...</button>
<button [style.样式属性.样式属性值单位]="判断条件?'结果为true样式属性值':'结果为false样式属性值' ">...</button>
    <div [ngStyle]="{'font-style':this.canSave?'italic':'normal'}">...</div>
<div [ngStyle]="{'样式属性':判断条件?'结果为true样式属性值':'结果为false样式属性值'}">...</div>

事件绑定（模板→控制器）

<input (input)="onInputEvent($event)">
<input (事件名称)="控制器方法名称(浏览器事件对象)">

  1. 事件绑定结构：

    结构

    描述

    小括号

    表示这是个事件绑定

    事件名称

    事件可以为：示例中为input事件

    组件方法名称

    示例中为onInputEvent

    浏览器事件对象

    示例中为$event

    当事件发生时执行的表达式除了上述的控制器方法，还可以为任意表达式。

  2. 实战：为一个“点我”按钮添加onlick事件，事件触发时调用控制器中的onclick()方法打印出按钮的事件对象。

    • 模板代码

      <button (click)="onClick($event)">点我</button>

    • 控制器代码

        onClick(event: object): void {
    console.log(event);
  }

双向绑定

双向绑定=事件绑定+属性绑定。 不过我们并不知道双向绑定中绑定的具体事件，angular将会为不同标签绑定不同的事件不同。

使用双向绑定时，需要在模块的@NgModule注解的imports中引入FormsModule。

Previous4.1依赖注入Next5.6响应式编程

Last updated

Was this helpful?