A brief analysis of how to communicate between non-parent and child components in Angular

How to communicate between non-parent-child components in Angular? This article will introduce to you how Angularnon-parent-child components communicate through services. I hope it will be helpful to you!

In fact, when it comes to passing values ​​between parent and child components, we are very familiar with it and it is very common in the business implementation process.

But my implementation involves cross-level (that is, value transfer between non-parent and child components). Yes, I can pass it up layer by layer and get it in the parent component. Is there a better way to pass values ​​from subcomponents? [Related tutorial recommendations: "angular tutorial"]

Requirement background:

has a sub-component, which can be understood as a third-level component. There is a drop-down box in this component. When a certain li tag is clicked, the corresponding selected value needs to be passed to the first-level component. At the same time, the first-level component requests the list interface with the received value, and then refreshes the data.

Initial idea:

At that time, I was thinking of saving the value selected by the user through localstorage, and then taking out the value through localstorage in the component being used. This value request interface; however, it cannot be implemented in real time. After the user selects it, it does not trigger me to obtain data in the parent component. That is, if the value in the child component changes, how can I notify the parent component.

Technical points:

Angular parent component and child component communicate through services

Parent component and its child component share The same service is used to implement two-way communication within the component family.

The scope of this service instance is limited to the parent component and its child components. Components outside this component subtree will not be able to access the service or communicate with them.

Principle

The parent component and its child components share the same service, and use this service to achieve two-way communication within the component family.

The scope of this service instance is limited to the parent component and its child components. Components outside this component subtree will not be able to access the service or communicate with them. Services are the bridge between child components and parent components, because services can be easily injected into other components, and because the Subject object can multicast (transmit) data to components that subscribe to this object, so combined with Angular Service and Subject in Rxjs can easily realize data communication between components.

Implementation:

Create a service file in the subcomponent, the code is as follows:

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class HeaderActionService {
  public pageTenantMode = new Subject<string>();
  // 获得一个Observable;
  missionConfirmed$ = this.pageTenantMode.asObservable();
  constructor() {}

  setParams(params) {
    this.pageTenantMode.next(params);
  }
}

The subcomponent data layer calls the above method and changes the value Pass it in.

this.tenantModeService.setParams（）

The above service is injected where the parent component calls it. The code is as follows:

    headerModeService.missionConfirmed$.subscribe(
        () => {
          this.mode = headerModeService.pageTenantMode;
          this.initTableData();
        }
      );

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

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