Angular双向绑定原理及操作细节如何深入理解？

本文共计660个文字，预计阅读时间需要3分钟。

目录双向绑定原理ngModel效果图自定义双向绑定属性组件-组件-ts外部使用效果图总结双向绑定原理双向绑定将数据模型与视图模型紧密连接，当数据模型发生变化时，视图会自动更新；反之亦然。

ngModelngModel 是 Angular 提供的一个指令，用于实现双向数据绑定。

效果图自定义双向绑定属性组件-组件-ts外部使用效果图总结双向绑定原理双向绑定将属性值绑定到模型，并通过事件监听实现数据同步。

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: './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 { } }

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注自由互联的更多内容!