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

This article introduces the relevant knowledge of "how to understand Angular @Output and @Input". In the actual case operation process, many people will encounter such difficulties. Next, let Xiaobian lead you to learn how to deal with these situations! I hope you can read carefully and learn something!

@Output and @Input Understanding

Output and Input are two decorators that Angular2 uses to implement cross-component communication, bi-directional binding, and other operations.

@Input

Component itself is a structure that supports nest. Between Child and Parent, if Parent needs to transmit data to child and display it in child's own page, it needs to be marked as input in Child's corresponding directive.

For example:

@Input() name: string;

Let's analyze the flow of @Input with an example.

Process:

child_component.ts has students and is marked by @Input, then this attribute is used as the input attribute.

Students is used directly in parent_component.html because the child component is imported in parent.module.ts

[students] This form is called attribute binding, and the bound value is the school.schoolStudents attribute

Angular assigns the value of schoolStudents to students and affects the display of child components

So we can conclude that there is data to be displayed in child_component, but the source of this data is through the form of attribute binding in parent_component.html as the input of child component. To successfully assign the students attribute in child component, you must use @Input.

@Input can also be used to set properties in the same way as typescript's get set accessor

private _name: string;

@Input get name() {return this._ name;}

set(name:string) {this._ name = name;} @Output

Output data flow direction and input is opposite, so that is child control parent data display, input is parent control child data display.

note

In Angular 2,@Output implementations must be implemented using EventEmitter.

And when you use tslint, variables can't be added on, but you can do it by adding a comment like this.

// tslint:disable-next-line:no-output-on-prefix

@Output() onRemoveElement = new EventEmitter();

Form:

//import EventEmitter first.

import { Component, Input, Output, EventEmitter } from '@angular/core';

...

@Output() mySignal = new EventEmitter();

EventEmitter(); The boolean parameter in the middle is the type of data you want to pass, which can be either basic or custom.

Let's go back to the old ways and analyze it with an example.

We can see through this diagram the flow of the whole event, so let's analyze it:

There is an OutputcustomClick event in the child component, and the data type of the event is number.

child component has an onClicked method, which is applied to the click event of the button control in html. The method binding is performed by (click)="onClicked()".

The parent component has a public attribute showMsg, and Angular's ts class defaults to public without the keyword.

There is an onCustomClicked method in the parent component, which is also used in html to bind to the customClick event of the output tag in the child component.

The button of html with step child is clicked->onClicked method is called->emit(99) triggers customClick->Angular recognizes the change through Output data stream and notifies parent html (customClick)->onCustomClicked(event) is called, event) is called, event is data 99-> changes showMsg attribute value-> affects display in parent html from 1 to 99.

"Angular @Output and @Input how to understand" content introduced here, thank you for reading. If you want to know more about industry-related knowledge, you can pay attention to the website. Xiaobian will output more high-quality practical articles for everyone!

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.