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

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.

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>

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

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>

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>

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

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>

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
}

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

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

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!