Angular[()]的語法暗示了element具有一個(gè)可以賦值的名為x的property，以及一個(gè)對(duì)應(yīng)的xChange事件。

一個(gè)例子：

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在顯示它的時(shí)候，可以進(jìn)行property binding. sizeChange通過@Output修飾，這樣可以給external receiver發(fā)送event.

parent Component的fontSizePx同child Component的size property進(jìn)行雙向綁定。

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

AppComponent的fontSizePx通過雙向綁定的方式關(guān)聯(lián)到了SizerComponent.

這個(gè)[(size)]的語法只是一個(gè)語法糖，實(shí)際會(huì)被轉(zhuǎn)換成如下代碼：

<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.

總結(jié)

以上是生活随笔為你收集整理的Angular应用双向绑定的语法糖的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。