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

This article mainly introduces how to transfer data between father and son components in Angular. It is very detailed and has a certain reference value. Friends who are interested must read it!

Environment:

Angular CLI: 11.0.6

Angular: 11.0.7

Node: 12.18.3

Npm: 6.14.6

IDE: Visual Studio Code

The most important thing to transfer data between components is to transfer data between parent and child components, such as:

The parent component passes data to the child component, and at the same time, when the child component data changes, you want to be able to notify the parent component.

In Angular, @ Input () and @ Output () provide a way for child components to communicate with their parent components. @ Input () allows the parent component to update data in the child component. Instead, @ Output () allows the child component to send data to the parent component.

Father and son @ Input ()

1. Child component definition @ Input ()

The @ Input () decorator in the child component indicates that the property can get a value from its parent component.

For example:

Export class ChildComponent {@ Input () message: string;}

Add variables to the @ Input () decorator, except that the data can be passed in from the parent component, other logic is the same as the normal variable

In the html code of a child component, you can use the variable message, for example:

Parent says: {{message}}

two。 The parent component passes variables to the child component

When the parent component invokes the child component, you can pass the parent component's variables (such as messageToChild) to the child component

In the child component, the incoming variable message can be changed, but its scope is only in the child component, and the parent component does not get the result of the change. (how to pass it to the parent component, please read on)

The son passes on the father @ Output ()

Angular uses an event (Event) to notify the parent component of a change in data, which the parent component needs to subscribe to.

1. Subcomponent definition @ Output

Subcomponent definition @ Output

Export class ChildComponent {/ / EventEmitter, which means it is an event / / new EventEmitter ()-/ uses Angular to create a new event emitter that emits data of type string. @ Output () newItemEvent = new EventEmitter (); addNewItem (value: string) {this.newItemEvent.emit (value);}}

Subcomponents call this addNewItem method when the data changes. For example, in html

Add an item: Add to parent's list

two。 Parent component subscription event

1. Add a method to handle the above events in the ts code of the parent component, such as

AddItem (newItem: string) {/ / logic here}

2. Subscribe to this event in the html of the parent component.

Event binding (newItemEvent) = 'addItem ($event)' connects the newItemEvent event in the child component to the addItem () method of the parent component.

These are all the contents of the article "how to transfer data between parent and child components in Angular". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

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.