Shulou(Shulou.com)06/03 Report--

You'll use @ Input () and @ Output () to learn about bidirectional binding.

Definition: two-way binding provides a way for components in an application to share data. Use two-way binding binding to listen for events and synchronize update values between parent and child components. (in fact, it is a simplification of @ Input () and @ Output ())

Two-way bindings can be roughly divided into two types:

I. two-way binding of ordinary components

This type of bidirectional binding can occur on any DOM element of any component, so let's take a look at it through an example.

Create a sizer component as a child component under src/app/components/:

/ / 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--;}}

However, this is not what we want, and we need to pass in size from the parent component so that the sizer component can change the font size. Moreover, the value of the changed size is passed back to the parent component through the button click event of the sizer component.

Next we will use the previous knowledge to transform the code (that is, an introduction to the principle of two-way binding):

The $event under / / src/app/app.component.html// is the value passed by the subcomponent (must be $event). The modified FontSize of the subcomponent: {{appFontSize}} / / src/app/app.component.ts...export class AppComponent {appFontSize = 14;} / src/app/components/sizer/sizer.component.ts...export class SizerComponent implements OnInit {/ / create the input attribute size, which is number or string type @ Input () size: number | string / / to create a custom event onSizeChange, you need a parameter of type number @ Output () onSizeChange = new EventEmitter ();.... Dec () {this.resize (- 1);} inc () {this.resize (1);} resize (step: number) {/ / sets the value between 12'40 font size this.size = Math.min (40, Math.max (12, + this.size + step)); / / passes the value this.onSizeChange.emit (this.size) through the event;}}

It also achieved the effect we wanted:

But isn't this a little too troublesome? Next, our two-way binding is officially on the scene:

Angular's two-way binding syntax is a combination of square brackets and parentheses [()]. [] perform attribute binding and () perform event binding. Modify the following code:

/ / the modified FontSize: {{appFontSize}} / / src/app/components/sizer/sizer.component.ts...export class SizerComponent implements OnInit {@ Input () size: number | string; / / modified event name of the modified FontSize app.implement.htl subcomponent, * must be: attribute name + Change form * @ Output () sizeChange = new EventEmitter ();. Resize (step: number) {this.size = Math.min (40, Math.max (12, + this.size + step)); this.sizeChange.emit (this.size);}}

You will find that the function is not affected.

Second, two-way binding in the form [(ngModel)]

Based on the previous basic knowledge of bi-directional binding, the [(ngModel)] syntax can be broken down as follows:

1. An input property named ngModel

two。 An output attribute named ngModelChange

Using form elements alone

First, you need to introduce the built-in module FormsModule:

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

Component uses:

Input value is {{iptVal}}

The above line of code corresponds to:

This is actually very simple, similar to the way it is written in vue.

Use in label

Put the code in the tag:

Input value is {{iptVal2}} in form

However, we will find that the browser will report an error:

If we use ngModel in a form form, we need to add a name property to input or set [ngModelOptions] = "{standalone: true}".

Modify the code:

Input value is {{iptVal2}} in form

Or:

Input value is {{iptVal2}} in form

Or:

Input value is {{iptVal2}} in form

Using bi-directional binding in form elements is as simple as that. Just introduce the FormsModule module.

Thank you for reading this article carefully. I hope the article "sample Analysis of two-way binding in Angular10" shared by the editor will be helpful to you. At the same time, I also hope you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.