Angular 6 Панель поиска и Result два разных не связанных компонента

Question

У меня есть два компонента 1. Header Component 2. Result Component В заголовке у меня есть строка поиска с нажатием кнопки, которую я хочу, чтобы результат отображался на странице результатов.

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

И заголовок, и компоненты результата не связаны, поэтому я могу использовать @input или output, поправьте меня, если есть ли способ передать значение?

main.component. html

  <app-header *ngIf="auth.isLoggednIn()"></app-header>
  <router-outlet></router-outlet>
  <app-footer></app-footer>
</div>

Header.component. html

    <div class="container">
      <ul>
        <li routerLinkActive="active"><a routerLink="/statupdate">Status Update</a></li>
        <li routerLinkActive="active"><a routerLink="/add">Add New</a></li>
        <li routerLinkActive="active"><a routerLink="/projects">Opportunity</a></li>
      </ul>
      <form class="form-inline" [formGroup]="searchForm" (ngSubmit)="onSubmit()">
        <input class="form-control mr-sm-2" type="search" placeholder="ClientName" aria-label="Search"
          formControlName="searchText">
        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
      </form>
    </div>
  </div>

Header.component.ts

    this.router.navigate(['search'], {
      queryParams: {
        search: this.searchForm.value.searchText,
      }
    });
  }

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

constructor(private route: ActivatedRoute,public projectService: ProjectService) { }

    ngOnInit() {

        this.projectService.list(this.route.snapshot.queryParamMap.get('search')).subscribe(
          (resp) => {
            this.list = resp;
          },(err) => {
            console.log(err);
          }
        )
    }

Возможно ли заполнить данные без перезагрузки страницы? Я не могу найти пример этого

Обновление Я написал службу BehaviorSubject для решения этой проблемы

private messageSource = new BehaviorSubject(<any>[]);
  currentMessage = this.messageSource.asObservable();

  constructor(public httpClient: HttpService) { }

  changeMessage(message) {

    this.httpClient.get('project?clientName=' + message)
      .subscribe(
        (resp) => {
          this.messageSource.next(resp);
        }
      )
  }

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

changeMessage(message) {

    let temp = this.httpClient.get('project?clientName=' + message)
     this.messageSource.next(temp);
  }

my Result.component.ts

ngOnInit() {
    this.searchService.currentMessage.subscribe(
      (message) => { console.log(message); this.message = message }, (err) => { console.log(err) })
  }

Answer 1

Несвязанные компоненты: обмен данными со службой

При передаче данных между компонентами, у которых отсутствует прямое соединение, такими как братья и сестры, внуки и т. Д. c, вам следует предоставить общий доступ служба. Когда у вас есть данные, которые должны были быть синхронизированы c, я считаю, что Rx JS BehaviorSubject очень полезен в этой ситуации.

Вы также можете использовать обычный Rx JS Subject для обмена данными через сервис, но вот почему я предпочитаю BehaviorSubject.

1. Он всегда будет возвращать текущее значение в подписке - нет необходимости вызывать onnext
2. У него есть функция getValue () для извлекать последнее значение как необработанные данные.
3. Это гарантирует, что компонент всегда получает самые последние данные.

В сервисе мы создаем частный объект BehaviorSubject, который будет содержать текущее значение сообщения. Мы определяем переменную currentMessage, обрабатывающую этот поток данных как наблюдаемую, которая будет использоваться компонентами. Наконец, мы создаем функцию, которая вызывает следующий объект BehaviorSubject для изменения его значения.

Все родительские, дочерние и дочерние компоненты получают одинаковую обработку. Мы внедряем DataService в конструктор, затем подписываемся на наблюдаемую currentMessage и устанавливаем ее значение равным переменной сообщения.

Теперь, если мы создадим функцию в любом из этих компонентов, которая изменяет значение сообщения. при выполнении этой функции новые данные автоматически передаются всем остальным компонентам.

data.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)
  }

}

one.component.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)
  }

}


two.component.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")
  }

}