带你了解Angular10中的双向绑定-tutorial js-php.cn

下面本篇文章带大家了解一下双向绑定，看看Angular中两种类型的双向绑定，希望对大家有所帮助！

带你了解Angular10中的双向绑定

前面我们了解了属性绑定、事件绑定以及输入和输出的使用，是时候了解双向绑定了。本节，我们将利用@Input()和@Output()来了解下双向绑定。【相关教程推荐：《angular教程》】

定义：双向绑定为应用中的组件提供了一种共享数据的方式。使用双向绑定绑定来侦听事件并在父组件和子组件之间同步更新值。(其实，也就是对@Input()跟@Output()的一种简化)

双向绑定大致可以分成两种类型：

一、普通组件的双向绑定

这个类型的双向绑定可以发生在任何组件任何DOM元素上，下面我们通过一个实例来具体认识一下。

在src/app/components/下面创建一个sizer组件作为子组件：

// src/app/components/sizer/sizer.component.html    FontSize: {{size}}px 
 // src/app/components/sizer/sizer.component.ts ... export class SizerComponent implements OnInit { public size = 14; // ... dec() { this.size++; } inc() { this.size--; } }

Salin selepas log masuk

页面将是这样，且按钮功能实现：

在这里插入图片描述

但是，这并不是我们想要的结果，我们需要从父组件传入size，从而让sizer组件改变字体大小。并且，通过sizer组件的按钮点击事件，将改变后的size的值回传给父组件。

接下来我们将使用前面的知识来改造代码（也就是双向绑定的原理介绍）：

// src/app/app.component.html // 下面的$event就是子组件传过来的值（必须是$event）  子组件修改后的FontSize： {{appFontSize}}
 // src/app/app.component.ts ... export class AppComponent { appFontSize = 14; }

Salin selepas log masuk

// src/app/components/sizer/sizer.component.ts ... export class SizerComponent implements OnInit { // 创建输入属性size，为number或字符串类型 @Input() size: number | string; // 创建自定义事件onSizeChange，需要一个number类型的参数 @Output() onSizeChange = new EventEmitter(); .... dec() { this.resize(-1); } inc() { this.resize(1); } resize(step: number) { // 设置字体大小为12～40之间的值 this.size = Math.min(40, Math.max(12, +this.size + step)); // 通过事件传值 this.onSizeChange.emit(this.size); } }

Salin selepas log masuk

同样实现了我们想要的效果：

在这里插入图片描述
但是，这样是不是太麻烦了一点呢？下面，我们的双向绑定正式出场：

Angular 的双向绑定语法是方括号和圆括号的组合[()]。[] 进行属性绑定，() 进行事件绑定。修改下面代码：

// src/app/app.component.html  子组件修改后的FontSize： {{appFontSize}}

Salin selepas log masuk

// src/app/components/sizer/sizer.component.ts ... export class SizerComponent implements OnInit { @Input() size: number | string; // 修改事件名,********必须是：属性名 + Change 形式********* @Output() sizeChange = new EventEmitter(); .... resize(step: number) { this.size = Math.min(40, Math.max(12, +this.size + step)); this.sizeChange.emit(this.size); } }

Salin selepas log masuk

会发现，功能没有受影响。

二、表单中的双向绑定[(ngModel)]

根据之前基本的双向绑定知识，[(ngModel)]语法可拆解为：

1.名为ngModel的输入属性

2.名为ngModelChange的输出属性

单独使用表单元素

首先需要引入FormsModule这个内置模块：

// src/app/app.module.ts import {FormsModule} from '@angular/forms'; ... @NgModule({ // ... imports: [ // ... FormsModule ], // ... })

Salin selepas log masuk

组件中使用：

  input value is {{iptVal}}

Salin selepas log masuk

上面这行代码相当于：

Salin selepas log masuk

这其实很简单的，类似vue里面的写法。

在标签中使用

将代码放入

但是，我们会发现浏览器会报错：

在这里插入图片描述
报错意思说，在form表单中使用ngModel的话，我们需要给input添加一个name属性或者设置[ngModelOptions]="{standalone: true}"

修改代码：

   form 中input value is {{iptVal2}}

Salin selepas log masuk

或者：

   form 中input value is {{iptVal2}}

Salin selepas log masuk

或者：

   form 中input value is {{iptVal2}}

Salin selepas log masuk

在表单元素中使用双向绑定就是这么简单了，注意引入FormsModule模块就行。

总结：

1、双向绑定的原理其实就是@Input()跟@Output()结合使用，需要注意语法是[(属性名)]=“父组件中一个属性名”，先绑定输入，再绑定输出；

2、在form表单中使用双向绑定，应首先引入FormsModule这个内置模块，然后在input元素上添加name。

更多编程相关知识，请访问：编程学习！！

Atas ialah kandungan terperinci 带你了解Angular10中的双向绑定. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Php8, saya datang juga

Ketahui reka letak tapak web dalam masa 30 minit

Tutorial Video Permulaan Shangguan Oracle kepada Mahir

Baris pertama kod UNI-APP anda

Berkibar dari awal ke pelancaran apl

Tutorial Video Linux Baharu Brother Lian

Tutorial Video AXURE 9 (Sesuai untuk UI Reka Bentuk Produk Interaktif Pengurus Produk)

Tutorial Video PS Kemahiran Asas Sifar

Tutorial video UI 16 hari untuk anda bermula

Tutorial Video Teknik PS dan Teknik Menghiris

Tutorial Video Pembinaan Persekitaran Awan Alibaba dan Pelancaran Projek

Gambaran Keseluruhan Rangkaian Komputer - Pengetahuan Asas yang Perlu Dikuasai Pengaturcara

Tutorial Penting untuk Pengaturcara - Penjelasan Protokol HTTP

Tutorial Video Websocket

带你了解Angular10中的双向绑定

双向绑定大致可以分成两种类型：

总结：