Angular应用双向绑定的语法糖
时间:2022-07-23
本文章向大家介绍Angular应用双向绑定的语法糖,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
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.
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 恕我直言你可能真的不会java第7篇:像使用SQL一样排序集合
- K8S 生态周报| KIND v0.9 发布带来众多更新
- oracle 数据回滚,恢复误删的数据,闪回表功能的使用
- C语言 | 关于结构体内存对齐,看这篇就够了
- Python 图像处理篇-利用opencv库展示本地图片实例演示
- Python 图像处理篇-利用opencv库和numpy库读取包含中文路径下的本地图片实例演示
- 从头创建您自己的vue.js——第2部分(虚拟DOM基础)
- Manage Jenkins报错:"依赖错误: 部分插件由于缺少依赖无法加载...",解决办法
- 从头创建您自己的vuei .js——第3部分(构建VDOM)
- adb 模拟上下左右滑动,示例演示
- python 技术篇-pythoncom.PumpMessag()关闭、杀死它的进程,pythoncom.PumpMessag()运行卡住解决办法
- PyQt5 技术篇-QWidget、QDialog程序窗口关闭closeEvent()触发事件方法重写
- 恕我直言你可能真的不会java第6篇:Stream性能差?不要人云亦云
- python-技术篇-打印详细报错日志,获取报错信息位置行数
- React从入门到放弃,一个关于网页速度的故事