Angular应用双向绑定的语法糖

更新时间：2022-09-09 16:30:22

Angular[()]的语法暗示了element具有一个可以赋值的名为x的property，以及一个对应的xChange事件。

一个例子：

import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-sizer',
  templateUrl: './sizer.component.html',
  styleUrls: ['./sizer.component.css']
})
export class SizerComponent {


  @Input()  size: number | string;
  @Output() sizeChange = new EventEmitter<number>();

  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);
  }

}

size Component的size属性加上了@Input注解，使得parent Component在显示它的时候，可以进行property binding. sizeChange通过@Output修饰，这样可以给external receiver发送event.

parent Component的fontSizePx同child Component的size property进行双向绑定。

<app-sizer [(size)]="fontSizePx"></app-sizer>
<div [style.font-size.px]="fontSizePx">Resizable Text</div>

AppComponent的fontSizePx通过双向绑定的方式关联到了SizerComponent.

这个[(size)]的语法只是一个语法糖，实际会被转换成如下代码：

<app-sizer [size]="fontSizePx" (sizeChange)="fontSizePx=$event"></app-sizer>

The $event variable contains the payload of the SizerComponent.sizeChange event. Angular assigns the $event value to the AppComponent.fontSizePx when the user clicks the buttons.

上一篇 : ：Angular 的 ngIf 和 NgIf 有何区别下一篇 : Angular开发文档中一些常用的词汇

Angular应用双向绑定的语法糖

相关阅读

推荐文章