Передача данных от одного компонента к другому в угловых

Question

Я работаю над приложением, которое содержит функцию поиска.

Сейчас у меня есть 2 компонента в приложении 1. Навбар 2. SearchGridList

Компонент Navbar содержит текстовое поле, в котором вы вводите поисковый запрос и нажимаете ввод, и этот компонент выполняет вызов API и получает данные. Когда данные вернутся, я хочу заполнить эти данные в массиве в компоненте SearchGridList.

Мне трудно понять, как передавать данные внутри компонентов в Angular, может кто-нибудь взглянет на мой код и поможет мне.

navbar.component.ts

import { Component, OnInit, Input, Output } from '@angular/core';
import {DataService} from '../../services/data.service';
import {SearchResults} from '../class/search.class';
import {SearchGridListComponent} from '../search-grid-list/search-grid-list.component';
import { EventEmitter } from '@angular/core';

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

  searchQuery : String;
  //searchResultList : Array<any> = [];

  constructor(private dataService :  DataService) { }

  doSearch () : any
  {
    this.dataService.doSQLSearch(this.searchQuery)
    .then ((data:any)=>{
      for (var i =0; i<data.Results.length;i++){
        let searchObj = new SearchResults(data.Results[i]);
        //I want to push data into array from SearchGrid like this 
        resultGridList.push(searchObj);

      }
    });
   }

  ngOnInit() {
  }
}

navbar.component.html

<mat-toolbar class="main-header">
  <a href="/">
  <img src="../../../assets/vms-header-logo.png" id= "header-logo">
  </a>
    <form class="search-box">
      <mat-form-field  class="search-box-full-width">
        <input id ="search-textbox" matInput placeholder="Enter a Barcode, DSID or any search term" name="Search" [(ngModel)]="searchQuery" (keyup.enter)="doSearch()" autocomplete="off">
      </mat-form-field>
    </form>
</mat-toolbar>

Поиск-grid.component.ts

import { Component, OnInit, Input } from '@angular/core';
import {NavbarComponent} from '../navbar/navbar.component';

@Component({
  selector: 'app-search-grid-list',
  templateUrl: './search-grid-list.component.html',
  styleUrls: ['./search-grid-list.component.css'],
})
export class SearchGridListComponent implements OnInit {
  resultGridList : Array <any> = [];
  constructor() { }

  ngOnInit() {
  }

}

Answer 1

Вы можете создать BehaviorSubject в вашем DataService

private messageSource = new BehaviorSubject<string>('service');

Вы можете обратиться к этой демонстрации для передачи данных между компонентами.

https://stackblitz.com/edit/behavior-subject-2019

Answer 2

Просто введите dataService в search-grid компонент. Сервисы являются единичными, вы можете делиться ими между компонентами.

В одном компоненте:

dataService.test = "hello";

в другом компоненте:

console.log(dataService.test); // "hello"

Для этого и нужны услуги.

Answer 3

Вам необходимо добавить на панель навигации следующее @Output событие:

export class NavbarComponent implements OnInit {
   ...
   @Output() public found = new EventEmitter<any>();
   ...
   doSearch () : any
   {
    this.dataService.doSQLSearch(this.searchQuery) .then ((data:any)=>{
      for (var i =0; i<data.Results.length;i++){
        let searchObj = new SearchResults(data.Results[i]);

        this.found.emit(searchObj);  // !!!! here emit event
                                     // however emitting events in loop looks strange... better is to emit one evet

      }
    });
   }
   ...
}

Хорошо, в вашем компоненте сетки используйте @Input в качестве resultGridList параметра

export class SearchGridListComponent implements OnInit {

  @Input() public resultGridList : Array <any> = [];
  ...
}

Хорошо, а теперьв вашем компоненте приложения соедините эти два следующим образом

html шаблона приложения:

<app-navbar (found)="handleResults($event)"></app-navbar>

<app-search-grid-list [resultGridList]="data"></app-search-grid-list>

и в файле ts приложения:

data = [];
...

handleResults(searchObj) {
  this.data = searchObj
}