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

This article introduces the relevant knowledge of "how non-parent-son components communicate in Angular". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

In fact, when it comes to passing values between parent and child components, it is all too familiar to us and is very common in the business implementation process.

But I'm involved in cross-level (that is, passing values between non-parent and child components) in the process of implementation, yes, I can pass it up layer by layer and get the value of the child component in the parent component, is there a better way?

Demand background:

There is a sub-component, which can be understood as the third-level component, in which there is a drop-down box. When you click on a li tag, you need to pass the corresponding selected value to the first-level component. At the same time, the first-level component requests the list interface with the received values, and then refreshes the data.

The original train of thought:

At that time, I wanted to save the value selected by the user through localstorage, and then take out the value through localstorage in the components used and request the interface with the value; however, it could not be achieved in real time. After the user selected it, it did not trigger me to get data in the parent component, that is, the value in the child component changed, and how to notify the parent component.

Technical points:

Angular parent and child components communicate through services

The parent component and its child components share the same service, which is used to realize two-way communication within the component family.

The scope of the 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, which is used to realize two-way communication within the component family.

The scope of the 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. The service is the bridge between the child component and the parent component, because the service can be easily injected into other components, and because the Subject object can multicast (transfer) the data to the components that subscribe to this object, so combining service in Angular and Subject in Rxjs can easily realize the data communication between components.

Achieve:

Create a service file in the subcomponent with the following code:

Import {Injectable} from'@ angular/core';import {Subject} from 'rxjs';@Injectable ({providedIn:' root'}) export class HeaderActionService {public pageTenantMode = new Subject (); / / get an Observable; missionConfirmed$ = this.pageTenantMode.asObservable (); constructor () {} setParams (params) {this.pageTenantMode.next (params);}}

The sub-component data layer calls the above method to pass the value in.

This.tenantModeService.setParams ()

The above service is injected into the place where the parent component is called. The code is as follows:

HeaderModeService.missionConfirmed$.subscribe (() = > {this.mode = headerModeService.pageTenantMode; this.initTableData ();}); "how non-parent-child components communicate in Angular" ends here. Thank you for your reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.