Получить данные от компонента к компоненту? (Angular)

Question

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

app.component. html:

<table>
  <tr *ngFor="let street of streets">
    <td (click)="getInfosOfStreet(street)">{{street}}</td>
  </tr>
</table>

Теперь, когда я нажимаю на строку, и получаю данные с помощью этого метода:

app.component.ts:

getInfosOfStreet(street):void{
    this.orderService.getStreetInfos(street).subscribe(data=>{
      console.log(data);
    });
  }

Но теперь я хочу показать эти данные на другой странице (компоненте).

street-info.component. html:

<h1>Hausnummern</h1>
<br>
<button>Zur Hauptseite</button>

<table>
    <tr>
        <td></td>
        <td></td>
    </tr>
</table>

Проблема в том, что я действительно не знаю, как получить эти данные из домашнего компонента в новый компонент. Я хочу сохранить эти данные в массиве и отобразить их в этой таблице в street-info.component.

Answer 1

Юрий, ответ правильный. Но я также добавляю свои 2 цента.

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

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

примерно так:

create файл street-info.service.ts с ng g s street-info:

import { Injectable } from '@angular/core';
import { Subject, Observable } from 'rxjs';

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

    streetObs$: Subject<any>; // your street-data type
    streetData: any;


    constructor() {
        this.streetObs$ = new Subject();
    }

    getStreetObs(): Observable<any> {
        return this.streetObs$.asObservable();
    }

    setStreetObs(data: any) {
        this.streetData = data;
        this.streetObs$.next(data);
    }

    getStreetData() {
        return this.streetData;
    }
}

В вашем методе getInfosOfStreet () (внедрите сервис в конструктор вашего компонента, чтобы использовать его):

getInfosOfStreet(street):void{
    this.orderService.getStreetInfos(street).subscribe(data=>{
      console.log(data);
      this.streetInfoService.setStreetObs(data); // here you can send the data to your service and let observers of the streetInfoObservable get notified.
    });
  }

Теперь в вашем street-info.component.ts вы можете подписаться на это наблюдаемое, например так:

unsubscribe$: Subject<void>;
streetData: any; // or an array of whatever type you need

constructor(private streetInfoService: StreetInfoService) {
  this.unsubscribe$ = new Subject(); // You need this subject to notify on destroy to unsubscribe from the subscription to prevent memory-leaks
}

ngOnInit() {
  this.streetData = this.streetInfoService.getStreetData();
  // and here subscribe to the observable
  this.streetInfoService.getStreetObs().pipe(
    takeUntil(this.unsubscribe$)
  ).subscribe(streetData => {

    // if its an object
    this.streetData = streetData;

    // if its an array do something like this
    this.streetData = [...streetData]; // I am using the spread operator here

  })
}

// here you unsubscribe from the observables
ngOnDestroy() {
  this.unsubscribe$.next();
  this.unsubscribe$.complete();
}

Но это действительно зависит от структуры вашего приложения. Если <app-street-info> является дочерним элементом представления, извлекающего данные, или у них один и тот же родительский элемент, достаточно использования @Input () и передачи данных от родительского к дочернему.

С уважением.

Answer 2

Это зависит от того, как оба ваших компонента составлены в вашем приложении. Предполагая, что app.component.html также содержит <app-street-info>, вы можете просто использовать @angular/core/EventEmitter.

В вашем street-info.component.ts обрабатывает уведомления, отправляемые app.component.ts. Изучите пример по ссылке.