Как передавать данные между компонентами Angular?

Question

Как передавать данные между компонентами Angular, когда они имеют более одного вложения?

Например:

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

Мне нужно передать данные результата из компонента filter-mobile в любой компонент внутри<router-outlet> </router-outlet> это может быть также вложенный компонент.

Если вам нужны дополнительные объяснения, оставьте комментарий

Answer 1

Лучшая практика для этого - иметь компонент, в котором вы объединяете эти две части (в HTML), действует как Smart Component и управляете потоками данных между ними. Вы также можете provide a service на этом уровне, который нижележащие компоненты могут (необязательно?) Также вводить и обмениваться данными через него. Вам придется подумать о данных, которые будут там проходить, но это еще один способ, которым вы можете достичь этого.

Особенно, когда filter-mobile component является источником интересующих вас событий, вы можете иметь более тесно связанную службу с тем компонентом, куда он отправляет свои события. Компонентам, зависящим от вашего роутера, затем (необязательно) придется прослушивать эту услугу и воздействовать на ее сообщения.

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

Answer 2

Вы можете обмениваться данными между различными компонентами, используя сервис для хранения / передачи данных.

По сути, вы должны:

1. Создать сервис
2. Добавить некоторые общедоступные свойства для хранения данных
3. Внедрить услугу в компоненты
4. Обновите эти компоненты, чтобы использовать сервис для хранения данных.

Я создал упрощенный пример здесь (stackblitz)

Answer 3

Вы должны установить все эти данные до класса обслуживания.

1 - создайте атрибут subjectSubject и предоставьте общий доступ ко всем компонентам

Answer 4

«Лучший» способ - использование сервисов. Вы можете использовать сервисы для связи между различными компонентами.

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

  }