angular双向绑定详解

angular双向绑定详解⽬录
双向绑定原理
ngModel
效果图
⾃定义双向绑定属性
组件-html
组件-ts
外部使⽤
效果图
总结
双向绑定原理
双向绑定将属性绑定与事件绑定结合在⼀起。

Angular 的双向绑定语法是⽅括号和圆括号的组合 [()]。

[] 进⾏属性绑定，() 进⾏事件绑定。

名称规则为 [输⼊名] + Change。

属性绑定(@Input-输⼊) - 设置特定的元素属性。

事件绑定(@Output-输出) - 侦听元素更改事件。

所以表单双向绑定中有 ngModel 和 ngModelChange，也可以⾃定义双向绑定属性。

ngModel
与表单元素进⾏双向绑定
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-bind',
template: `
<div>
<div>Name: {{ name }}</div>
<input type="text" style="width: 300px;" nz-input name="name" [(ngModel)]="name" autocomplete="off">
</div>
`
})
export class BindComponent implements OnInit {
name = '';
constructor() { }
ngOnInit(): void { }
}
效果图
⾃定义双向绑定属性
组件-html
<div>
<div>inner: {{ value }}</div>
<input style="width: 300px;" nz-input (input)="onInput(input.value)" #input autocomplete="off">
</div>
组件-ts
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
@Component({
selector: 'app-inner',
templateUrl: './ponent.html',
styleUrls: ['./ponent.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 { }
}
效果图
总结
本篇⽂章就到这⾥了，希望能够给你带来帮助，也希望您能够多多关注的更多内容!。