Как передать данные из функции, полученные от дочернего компонента, а затем передать их другому дочернему элементу? - PullRequest
Новая
       19

Как передать данные из функции, полученные от дочернего компонента, а затем передать их другому дочернему элементу?

0 голосов
/ 16 апреля 2019

У меня есть компонент заголовка с двумя дочерними компонентами: один - панель поиска, а другой - список поиска.Теперь я могу получать входные данные из компонента панели поиска в заголовок через функцию emit, но как я могу передать полученные данные другому дочернему элементу, используя @Input?

компонент панели поиска 

sendMessage() {
    this.messageEvent.emit(this.searchText)
  }

компонент заголовка

message: string;

  receiveMessage($event) {
    this.message = $event
  }

компонент списка поиска 

@Input() message: any;

заголовок HTML 

<div *ngIf="message">
  <app-search-list [message]="message" ></app-search-list>
</div>

Я получаю ОШИБКУ TypeError: Невозможно прочитать свойство concat из undefined.

В компоненте панели поиска у меня есть поле ввода, когда я набираю там, я использую каналы для поиска данных ... так что я делаю ... когда я набираю что-то, я получаю этот текст, передаю егородительский компонент, а затем передать его другому дочернему компоненту, где я вызываю этот конвейер, чтобы выполнить запрос для поиска.

Спасибо

1 Ответ

0 голосов
/ 16 апреля 2019

Вместо маршрутизации сообщения через заголовок вы можете использовать одноэлементную службу, которая может транслировать его подписанным компонентам.

Создать службу данных, которая отвечает за трансляцию значения: 

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

@Injectable({
  providedIn: 'root'
})
export class DataService {

  private value: string;
  listeners = [];

  constructor() {
    this.value = '';
  }

  onDataChange(fn) {
    this.listeners.push(fn);
  }

  set setData(value: string) {
    this.value = value;
    this.listeners.forEach((fn) => {
      fn(value);
    });
  }
}

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

constructor(private dataService: DataService) {}

Вы можете установить значение данных в компоненте следующим образом: 

this.dataService.setData= 'New value';

Затем вы можете подписаться на событие изменения значения службы данных в другом компоненте в ngOnInit: 

ngOnInit() {
    this.dataService.onDataChange((value) => {
         this.data = value;
    });
}

Live Demo

...