Как получить ответ EvenEmitter Angular 6

Question

У меня есть следующий родительский компонент:

<h1>Vehicle Inventory</h1>

<p *ngIf="!vehicles"><em>No vehicle entries found</em></p>

<div *ngIf="vehicles">

    <ul class="nav nav-pills nav-fill">
        <li class="nav-item">
          <a class="nav-link" routerLink="/home/price" routerLinkActive="active">Search By price</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" routerLink="/home/make-model" routerLinkActive="active">Search By Make Or Model</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" routerLink="/home/engine-capacity" routerLinkActive="active">Search By Engine Capacity</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" routerLink="/home/cylinder-variant" routerLinkActive="active">Search By Cylinder Variant</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" routerLink="/home/cylinder-capacity" routerLinkActive="active">Search By Cylinder Capacity</a>
        </li>
    </ul>

  <router-outlet></router-outlet>
</div>

<table class="table" *ngIf="vehicles">
    <thead class="thead-dark">
      <tr>
        <th scope="col">Make</th>
        <th scope="col">Model</th>
        <th scope="col">Engine Capacity</th>
        <th scope="col">Cylinder Variant</th>
        <th scope="col">Top Speed</th>
        <th scope="col">Price (R)</th>
        <th scope="col">Cylinder Capacity</th>
        <th scope="col">Air Pressure/second</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let vehicle of vehicles">
        <td>{{ vehicle.Make }}</td>
        <td>{{ vehicle.Model }}</td>
        <td>{{ vehicle.EngineCapacity }}</td>
        <td>{{ vehicle.CylinderVariant }}</td>
        <td>{{ vehicle.TopSpeed }}</td>
        <td>{{ vehicle.Price }}</td>
        <td>{{ vehicle.IndividualCylinderCapacity }}</td>
        <td>{{ vehicle.AirPressurePerSecond }}</td>
      </tr>
    </tbody>
  </table>

Что можно увидеть из вышесказанного, так это то, что у меня есть некоторая навигация, которая будет определять, какой дочерний компонент загружается в <router-outlet>.

Мой дочерний компонент отправляет событие через EventEmiiter, как показано ниже:

import { Component, OnInit, Input, Output } from '@angular/core';
import { VehicleService } from '../../Services/VehicleService';
import { EventEmitter } from '@angular/core';
import { Vehicle } from '../../Models/Vehicle';

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

  @Input() cylinderCapacity: any;
  @Output() dataNotifier: EventEmitter<Vehicle[]> = new EventEmitter();

  constructor(private service: VehicleService) { }

  ngOnInit() {
  }

  searchVehicle() {
    this.service
          .SearchVehiclesByCylinderCapacity(this.cylinderCapacity)
            .subscribe(response => this.dataNotifier.emit(response));

  }

}

Как мне захватить ответ этого события, чтобы транспортное средство моего родительского компонента: Vehicle [] моглобыть заполненным ответом на событие?

Answer 1

После того, что упомянул @vincecampanale, я пришел к следующему:

В моем классе VehicleService у меня есть следующий код для поиска транспортных средств на основе различных поисков.Класс VehicleService также включает dataChangedEvent: EventEmitter<Vehicle[]>, который при отправке в него будет содержать самые последние результаты для Vehicle.

Вот мой VehicleService

import { Injectable, ErrorHandler, EventEmitter } from "@angular/core";
import { Observable, throwError } from 'rxjs';
import { catchError, retry } from 'rxjs/operators';

import { ConfigService } from "./ConfigService";
import { Vehicle } from "../Models/Vehicle";
import { HttpClient } from "@angular/common/http";
import { HttpResponse } from "selenium-webdriver/http";


@Injectable({
    providedIn: "root"
})
export class VehicleService {

    dataChangedEvent: EventEmitter<Vehicle[]> = new EventEmitter();

    constructor(private http: HttpClient, private configService: ConfigService){

    }

    SearchVehiclesByCylinderCapacity(cylinderCapacity: any): Observable<Vehicle[]> {
        var finalEndPoint = this.configService.SearchVehiclesByCylinderCapacityEndpoint + cylinderCapacity;
        return this.makeRequest(finalEndPoint);
    }
    SearchTop10ByAirPressure(airPressure: any): Observable<Vehicle[]> {
        var finalEndPoint = this.configService.SearchVehiclesByAirPressureEndpoint + airPressure;
        return this.makeRequest(finalEndPoint);
    }

    private makeRequest(endpoint: string): Observable<Vehicle[]> {
        return this.http.get<Vehicle[]>(endpoint);
    }
}

Каждый дочерний компонент будет излучатьданные в dataChangedEvent в K, как только они получили ответ в обработчике subscribe().

Вот дочерний компонент:

import { Component, OnInit } from '@angular/core';
import { VehicleService } from '../../Services/VehicleService';

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

  engineCapacity: any;

  constructor(private vehicleService: VehicleService) { 

  }

  ngOnInit() {
  }

  searchVehicle(): void {
    this.vehicleService
          .SearchVehiclesByEngineCapacity(this.engineCapacity)
            .subscribe(response => this.vehicleService.dataChangedEvent.emit(response));
  }
}

Наконец, в родительском компоненте,Я subscribe() до dataChangedEvent в VehicleService, и родительский компонент будет уведомлен, когда данные для найденных автомобилей изменились.Ниже мой родительский компонент, который записывается на dataChangedEvent в VehicleService, из constructor

import { Component, OnInit, Input } from '@angular/core';
import { VehicleService } from '../../Services/VehicleService';
import { Vehicle } from '../../Models/Vehicle';

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

  vehicles: Vehicle[];

  constructor(private vehicleService: VehicleService) {
    this.vehicleService.dataChangedEvent.subscribe(response => this.vehicles = response)
   }

  ngOnInit() {
    this.vehicleService
      .GetAllVehicles()
        .subscribe(response => this.vehicles = response, 
                    error => console.log(error));
  }

  populateGrid(vehicleData: Vehicle[]){
    this.vehicles = vehicleData;
  }
}

Answer 2

Этот ответ основан на собственном ответе monstertjie_za на вопрос.

Учитывая, что, похоже, VehicleService предоставляет различные способы получения множества транспортных средств.Я бы публично раскрыл сам vehicles.

@Injectable({
    providedIn: "root"
})
export class VehicleService {
    vehicles: Vehicle[] | undefined;

    constructor(private http: HttpClient, private configService: ConfigService) { }

    searchVehiclesByCylinderCapacity(cylinderCapacity: any): void {
        var finalEndPoint = this.configService.SearchVehiclesByCylinderCapacityEndpoint 
            + cylinderCapacity;
        this.makeRequest(finalEndPoint);
    }

    searchTop10ByAirPressure(airPressure: any): void {
        var finalEndPoint = this.configService.SearchVehiclesByAirPressureEndpoint 
            + airPressure;
        this.makeRequest(finalEndPoint);
    }

    private makeRequest(endpoint: string): void {
        this.http.get<Vehicle[]>(endpoint)
            .subscribe(vehicles => this.vehicles = vehicles);
    }
}

Тогда дочерний компонент только запускает вызов, но на самом деле ничего не делает:

@Component({
  selector: 'app-search-engine-capacity'
})
export class SearchEngineCapacityComponent {  
  constructor(private vehicleService: VehicleService) { }

  searchVehicle(): void {
      this.vehicleService.searchVehiclesByEngineCapacity(this.engineCapacity);
  }
}

И ваш HomeComponent просто предоставляет сервис, который выставляет транспортные средства для использования на ваш взгляд:

@Component({
  selector: 'app-home',
})
export class HomeComponent implements OnInit {
  constructor(vehicleService: VehicleService) {}

  ngOnInit() {
    this.vehicleService.getAllVehicles();
  }
}

<table class="table" *ngIf="vehicleService.vehicles">
    <thead class="thead-dark">
      <tr>
        <th scope="col">Make</th>
        <th scope="col">Model</th>
        <th scope="col">Engine Capacity</th>
        <th scope="col">Cylinder Variant</th>
        <th scope="col">Top Speed</th>
        <th scope="col">Price (R)</th>
        <th scope="col">Cylinder Capacity</th>
        <th scope="col">Air Pressure/second</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let vehicle of vehicleService.vehicles">
        <td>{{ vehicle.Make }}</td>
        <td>{{ vehicle.Model }}</td>
        <td>{{ vehicle.EngineCapacity }}</td>
        <td>{{ vehicle.CylinderVariant }}</td>
        <td>{{ vehicle.TopSpeed }}</td>
        <td>{{ vehicle.Price }}</td>
        <td>{{ vehicle.IndividualCylinderCapacity }}</td>
        <td>{{ vehicle.AirPressurePerSecond }}</td>
      </tr>
    </tbody>
</table>

Answer 3

Невозможно прослушивать события из router-outlet, так как это просто заполнитель.Вы можете использовать «общую службу», как описано в этом ответе: https://stackoverflow.com/a/41989983/5932590.

Чтобы имитировать событие dateNotifier, общая служба может выглядеть примерно так:

@Injectable()
export class DateNotifierService {
    private source = new Subject<Vehicle[]>();
    public event$ = this.source.asObservable();
    emit(eventData: Vehicle[]): void {
        this.source.next(eventData);
    }
}

Затем вы можете внедрить его в ваш дочерний компонент и генерировать события:

export class SearchCylinderCapacityComponent {
  vehicles: Vehicle[];

  constructor(private dateNotifier: DateNotifierService) {}

  onClick(){
    this.dateNotifier.emit(this.vehicles);
  }
}

А также внедрить его в ваш родительский компонент и захватить события:

export class ParentComponent {
  constructor(private dateNotifier: DateNotifierService) {
    dateNotifier.event$.subscribe(vehicles => console.log(vehicles));
  }
}