Как передать данные формы другому компоненту через сервис?

Question

У меня есть форма поиска на моей странице Angular 2 (8), и я хочу собрать данные формы, передать их службе поиска, выполнить поиск / фильтрацию (если необходимо), а затем передать результаты компоненту рендеринга,переместив пользователя на другую страницу.

Теперь в моем form.component.html у меня есть:

<form #f="ngForm" (ngSubmit)="onSubmit(f)"
   fxLayout="column" fxLayoutAlign="start start">
   // some form fields
   <button 
     type="submit" 
     mat-raised-button 
     color="primary"
     [disabled]="f.invalid">Search</button>
</form>

Итак, у form.component.ts есть метод onSubmit:

onSubmit(form: NgForm) {
  const searchForm = form.value as SearchForm;
  console.log(searchForm);
}

И вот здесь начинается мой вопрос: я хочу передать данные в службу поиска, может быть что-то вроде:

this.searchService.performSearch(searchForm)
  .subscribe(
    () => {
      router.navigate('/results');
    },
    () => { }
    );

Затем я хочу получить доступ к этим данным в моем search.component.ts:

results = Result[];

И в search.component.html:

<app-search-item *ngFor="let result of results" [result]="result">
</app-search-item>

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

Answer 1

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

this.serachService.search(input)

В службе поиска вы можете получить массив результатов и получить результаты

results = Results[]
search(input){
// get results from your api here 
 this.http
        .get(`api/search/?name=${term}`).subscribe( res =>{
this.results = res;
 router.navigate('/results');

}

В компоненте поиска выможно использовать this.searchService.results

Answer 2

Вы можете передавать данные во время навигации следующим образом:

this.router.navigate('/results', { state: result });

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

this.router.getCurrentNavigation().extras.state