Home > Web Front-end > JS Tutorial > body text

A brief discussion on how to transfer data between parent and child components in Angular

青灯夜游
Release: 2021-06-15 10:30:23
forward
2138 people have browsed it

This article will introduce to you the method of transferring data between parent and child components in Angular. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

A brief discussion on how to transfer data between parent and child components in Angular

Environment:

  • Angular CLI: 11.0.6
  • Angular: 11.0.7
  • Node: 12.18.3
  • npm : 6.14.6
  • IDE: Visual Studio Code

1. Summary

The most important thing to transfer data between components is to transfer data between parent and child components. For example:

<parent-component>
  <child-component></child-component>
</parent-component>
Copy after login

The parent component passes in data to the child component. At the same time, when the child component data changes, 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 parent components to update data in child components. In contrast, @Output() allows child components to send data to parent components. [Related tutorial recommendations: "angular tutorial"]

2. Passing from father to son@Input()

2.1 . Subcomponent definition @Input()

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

For example:

export class ChildComponent {
  @Input() message: string;
}
Copy after login

1. Add the variables of the @Input() decorator. Except that data can be passed in from the parent component, other logic is the same as ordinary variables;

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

<p>
  Parent says: {{message}}
</p>
Copy after login

2.2. The parent component passes the variable to the child component

When the parent component calls the child component, the parent component's variables (such as messageToChild) can be passed to the child component

<child-component [message]="messageToChild"></child-component>
Copy after login

In the child component, the message can be changed This variable is passed in, but its scope is only in the child component, and the parent component cannot get the changed result. (How to pass it to the parent component, please read on)

3. Pass the child to the parent @Output()

Angular implements the child through events (Event) The component notifies the parent component of data changes, and the parent component needs to subscribe to the event.

3.1. Subcomponent definition@Output

Subcomponent definition@Output

export class ChildComponent {

  // EventEmitter ,这意味着它是一个事件
  // new EventEmitter<string>() - 
  // 使用 Angular 来创建一个新的事件发射器,它发出的数据是 string 类型的。
  @Output() newItemEvent = new EventEmitter<string>();

  addNewItem(value: string) {
    this.newItemEvent.emit(value);
  }
}
Copy after login

When the data changes , just call this addNewItem method. For example, in html

<label>Add an item: <input #newItem></label>
<button (click)="addNewItem(newItem.value)">Add to parent&#39;s list</button>
Copy after login

3.2. Parent component subscribes to events

1. In the ts code of the parent component, add a function that handles the above event Method, such as

addItem(newItem: string) {
    // logic here
}
Copy after login

2, in the html of the parent component, subscribe to the event.

<child-component (newItemEvent)="addItem($event)"></child-component>
Copy after login

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

4. Summary

  • Using @Input() and @Output() can easily realize data transfer between parent and child components. shared.

  • You can use @Input() and @Output() at the same time

For more programming-related knowledge, please visit:Introduction to Programming ! !

The above is the detailed content of A brief discussion on how to transfer data between parent and child components in Angular. For more information, please follow other related articles on the PHP Chinese website!

source:csdn.net
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template