这篇文章主要为大家展示了“angular双向绑定的示例分析”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“angular双向绑定的示例分析”这篇文章吧。
双向绑定将属性绑定与事件绑定结合在一起。
Angular 的双向绑定语法是方括号和圆括号的组合 [()]。
[] 进行属性绑定，() 进行事件绑定。
名称规则为 [输入名] + Change。
属性绑定(@Input-输入) - 设置特定的元素属性。
事件绑定(@Output-输出) - 侦听元素更改事件。
所以表单双向绑定中有 ngModel 和 ngModelChange，也可以自定义双向绑定属性。
与表单元素进行双向绑定
计算
安全
数据库
网络和加速
企业服务
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-bind',
template: `
<div>
<div>Name: {{ name }}</div>
<input type="text" nz-input name="name" [(ngModel)]="name" autocomplete="off">
</div>
`
})
export class BindComponent implements OnInit {
name = '';
constructor() { }
ngOnInit(): void { }
}
<div>
<div>inner: {{ value }}</div>
<input nz-input (input)="onInput(input.value)" #input autocomplete="off">
</div>import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
@Component({
selector: 'app-inner',
templateUrl: './inner.component.html',
styleUrls: ['./inner.component.scss']
})
export class InnerComponent implements OnInit {
// 设定输入属性
@Input() value!: string;
// 设定输出事件
@Output() valueChange: EventEmitter<string> = new EventEmitter();
constructor() { }
ngOnInit(): void { }
onInput(value: string){
// 触发输出事件-输出数据
this.valueChange.emit(value);
}
}import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-outer',
template: `
<div>
<div>Name: {{ name }}</div>
<app-inner [(value)]="name"></app-inner>
</div>
`
})
export class OuterComponent implements OnInit {
name = '';
constructor() { }
ngOnInit(): void { }
}
以上是“angular双向绑定的示例分析”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
