如何在组件Angular之间传输数据？

Question

How to transfer data between component Angular when they are more than one nesting?

For example:

<router-outlet> </router-outlet>
<filter-mobile></filter-mobile>

I need pass outcome data from component filter-mobile to any component inside <router-outlet> </router-outlet> it can be also nested component.

If you need more explanations, please leave comment

Answer 1

The best practice for this is to have the component where you combine these two parts (in the HTML), act as a Smart Component and manage the data flows between the two. You could also provide a service on this level that the underlaying components can (Optionally?) inject as well and communicate through that. You will have to think about the data that will pass through there, but it's another way you can achieve it.

Especially when the filter-mobile component is the source of the events you are interested in, you can have a more tightly connected service to that component where it emits it's events to. The components depending on your router will then (optionally) have to listen to this service and act on its messages.

https://angular.io/guide/component-interaction#parent-and-children-communicate-via-a-service

Answer 2

The "best" way is using services .You can use the services to communicate between the different components.

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

@Injectable()
export class ShareableServiceService {

/**
* Choose your dataType
*/
public shareableData: BehaviorSubject<any> = new BehaviorSubject()

constructor() { 


}


  public updateData(newContent: any): void  {
    this.shareableData.next(newContent);
  }

}
//COMPONENT 
import { Component } from '@angular/core';

@Component({
 selector: 'my-app',
 templateUrl: './app.component.html',
 styleUrls: [ './app.component.css' ]
})
  export class AppComponent  {
  name = 'Angular';

  constructor(private  service: ShareableServiceService) {

  this.service.shareableData.subscribe(data => {

    //DO SOMETHING TO YOUR DATA HERE
  });

  }

Answer 3

You Should set all these data up to a service class.

1 - create a behaviorSubject atribuite and share all over your components

Answer 4

You can share data between different components using a service to store/pass the data around.

Basically, you should:

1. Create a service
2. Add some public properties to hold the data
3. Inject the service into the components
4. Update these components to use the service to store the data.

I created an oversimplified example here (stackblitz)