синхронизировать данные и события между двумя компонентами синхронно

Question

Я новичок здесь, начинаю код с Angular 7, и у меня проблема.
Я создал два компонента и сервис. Данные извлекаются службой при нажатии кнопки в компоненте searchbar. Я хочу показать это в search-res виде. Служба имеет данные, взятые из searchbar компонента

Это код услуги:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http'
import { Observable } from 'rxjs';

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

  constructor(private http:HttpClient) { }



  getData( input:string ):Observable<any>
  {
   return this.http.get<any>('https://newsapi.org/v2/everything?q='+input+'&apiKey=b9d34afdf37948cda401c3dc0afe1189')
  }

}

Я не уверен, как это сделать в следующих компонентах:

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

@Component({
  selector: 'app-searchbar',
  templateUrl: './searchbar.component.html',
  styleUrls: ['./searchbar.component.css']
})
export class SearchbarComponent implements OnInit {
  public inData : string ;  

  constructor(private data : DataService) { }

  ngOnInit() {
  }

}

компонент поискового разрешения

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

@Component({
  selector: 'app-search-res',
  templateUrl: './search-res.component.html',
  styleUrls: ['./search-res.component.css']
})
export class SearchResComponent implements OnInit {

  constructor(private data: DataService) { }

  ngOnInit() {
  }

}

пожалуйста, помогите!

Answer 1

Добро пожаловать в stackoverflow!

Как и в большинстве случаев в кодировании, у вас есть несколько вариантов.И не ясно, как связаны два указанных вами компонента (SearchbarComponent и SearchResComponent).

Подписаться на оба компонента

Это самый простой способ получить данныена оба компонента и не требует каких-либо отношений между ними.Но делает , затем получает данные дважды.Так что это может быть хорошим выбором для «начала работы» и создания рабочего прототипа, но может не подходить для производственного решения.

Подписаться на один компонент и передать данные другому

Эта опция также довольно проста, но зависит от того, как связаны компоненты.

Если один компонент является дочерним компонентом другого ... то есть он находитсяс другой стороны, вот так:

html компонента 1

<component2's selector></component2's selector>

Затем вы можете передать данные дочернему компоненту, используя Input properties.

Buildкэш данных

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

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

ИЛИ вы можете определить HttpInterceptorи управляйте своим кешем там.

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

Использовать библиотеку управления состоянием

Вы можете использовать состояниебиблиотека управления (например, NgRx).Он обрабатывает кэширование ваших данных и предоставляет их любому компоненту, который в них нуждается.Это отличное решение для приложения производственного качества ... но оно немного пугает новых разработчиков Angular, поскольку оно использует сложные функции, такие как RxJS.

Каждая из них - большая тема ...Я знаю, есть ли какой-то конкретный выбор, который вас интересует, и я могу дать некоторые подсказки для получения дополнительной информации.