Как показать результаты отправки из одного компонента в другой компонент?

Question

У меня есть компонент фильтра: компонент ExtendedSearch. И у меня есть компонент списка, который должен получить результаты от компонента extendedSearch. И у меня есть сервисный вызов, который используется вызовом ExtendedSearch.

Answer 1

Попробуйте сослаться на этот ответ ( Angular 8: передать данные на маршрутизатор ), который я дал на аналогичный вопрос. У него есть 4 способа решения этой проблемы.

1. От родителя к ребенку: обмен данными с помощью Input()
2. От родителя к ребенку: обмен данными с помощью ViewChild
3. Дочерний к родителю: обмен данными через Output() и EventEmitter
4. Несвязанные компоненты: обмен данными со службой (рекомендуется)

Надеюсь, это поможет!

Удачи!

Answer 2

Вы можете использовать @Input и @Output Emitters для обмена результатами для различных компонентов. подробнее в medium

С помощью услуг вы можете сделать это следующим образом

Service.ts
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable()
export class DataService {

  private messageSource = new BehaviorSubject('default message');
  currentMessage = this.messageSource.asObservable();

  constructor() { }

  changeMessage(message: string) {
    this.messageSource.next(message)
  }

}


Parent.ts 
import { Component, OnInit } from '@angular/core';
import { DataService } from "../data.service";

@Component({
  selector: 'app-parent',
  template: `
    {{message}}
  `,
  styleUrls: ['./sibling.component.css']
})
export class ParentComponent implements OnInit {

  message:string;

  constructor(private data: DataService) { }

  ngOnInit() {
    this.data.currentMessage.subscribe(message => this.message = message)
  }

}
sibling.ts
import { Component, OnInit } from '@angular/core';
import { DataService } from "../data.service";

@Component({
  selector: 'app-sibling',
  template: `
    {{message}}
    <button (click)="newMessage()">New Message</button>
  `,
  styleUrls: ['./sibling.component.css']
})
export class SiblingComponent implements OnInit {

  message:string;

  constructor(private data: DataService) { }

  ngOnInit() {
    this.data.currentMessage.subscribe(message => this.message = message)
  }

  newMessage() {
    this.data.changeMessage("Hello from Sibling")
  }

}