Отображать данные в другом угловом компоненте - PullRequest
Новая
       42

Отображать данные в другом угловом компоненте

1 голос
/ 15 апреля 2019

Может ли кто-нибудь дать мне рабочий пример (или сослаться на один), который иллюстрирует эту функцию на Angular:

Компонент A: получает данные с сервера (пользователь вводит слово в поле ввода,сервер отвечает определением)

Компонент B: данные, полученные с сервера, будут отображаться в этом компоненте.

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

Для более подробной информации: я разместил вопрос здесь: Angular: Как перенаправить на другую страницу при отправке

У меня естьслужба для обмена данными между компонентами, но моя проблема в том, как передать данные, полученные от сервера, из компонента A в компонент B?

Ответы [ 3 ]

2 голосов
/ 15 апреля 2019

Из документации Angular данные могут быть разделены между компонентами с помощью:

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

Сначала настройте службу с помощью BehaviorSubject. Это позволяет компонентам передавать данные в службу и получать данные из службы.

data.service.ts 

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

@Injectable()
export class DataService {
  private _data: BehaviorSubject<any> = new BehaviorSubject<any>(null)

  constructor() { }

  getData(): Observable<any> {
    return this._data.asObservable();
  }

  setData(data: any) {
    this._data.next(data);
  }

  getSomeData() {
    return of([
      {id: 1, name: 'Name 1'},
      {id: 2, name: 'Name 2'},
      {id: 3, name: 'Name 3'},
    ]);
  }

}

Затем создайте компонент, в данном случае first.component, в который вставлено DataService. Этот компонент использует оба способа связи: EventEmitter s с @Output() s и настройку данных службы для других компонентов, на которые подписывается.

first.component.ts 

import { Component, EventEmitter, OnInit, Output } from '@angular/core';

import {DataService} from '../data.service';

@Component({
  selector: 'app-first',
  templateUrl: './first.component.html',
  styleUrls: ['./first.component.css']
})
export class FirstComponent implements OnInit {
  @Output() dataLoaded: EventEmitter<any> = new EventEmitter<any>();

  constructor(private dataService: DataService) { }

  ngOnInit() {
    this.dataService.getSomeData().subscribe(
      (data: any) => {
        // use this to emit data to a parent component
        this.dataLoaded.emit(data);

        // use this to set data in the service that other components can subscribe to
        this.dataService.setData(data);
      }
    );
  }

}

В AppComponent установите переменную data для хранения данных, которые отправляются из FirstComponent.

app.component.ts 

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  private _data: any[] = [];

  get data(): any[] {
    return this._data;
  }

  set data(data: any[]) {
    this._data = data;
  }
}

Затем прослушайте событие dataLoaded в шаблоне компонента приложения и установите данные компонента приложения.

app.component.html 

<app-first (dataLoaded)="data = $event"></app-first>

Чтобы получить данные для SecondComponent, когда FirstComponent подписывается на данные и отправляет их своему родительскому компоненту, FirstComponent также может отправлять эти данные обратно в службу, которая помещает данные в другую Наблюдаемую, что SecondComponent можете подписаться на.

second.component.ts 

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

import {DataService} from '../data.service';

@Component({
  selector: 'app-second',
  templateUrl: './second.component.html',
  styleUrls: ['./second.component.css']
})
export class SecondComponent implements OnInit {
  data: any[] = [];

  constructor(private dataService: DataService) { }

  ngOnInit() {
    this.dataService.getData().subscribe(
      (data: any) => this.data = data
    );
  }

}

SecondComponent теперь может использовать данные, загруженные из FirstComponent в своем шаблоне.

second.component.html 

<table>
  <thead>
    <tr>
      <th>Id</th>
      <th>Name</th>
    </tr>
  </thead>

  <tbody>
    <tr *ngFor="let item of data">
      <td >{{ item?.id }}</td>
      <td >{{ item?.name }}</td>
    </tr>
  </tbody>
</table>
0 голосов
/ 15 апреля 2019

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

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

Думайте об этом как о единичном.Вы можете сохранить данные в переменной внутри сервиса.Компоненты A и B могут получить к нему доступ, и вы уверены, что к обоим компонентам обращались одинаковые данные.

0 голосов
/ 15 апреля 2019

Попробуйте это

модуль импорта. 

import {EventEmitter} from '@angular/core';

сделать объект 

  @Output() arrayList = new EventEmitter();

испускает ваши данные из вашего первого компонента 

this.arrayList.emit(yourdata);

вам нужно написать эту строку в другом компоненте html-файла сверху (второй компонент) 

</app-header (arrayList)='displayChanges($event)'></app-header>

теперь сделайте вашу функцию во второстепенном компоненте, где вы хотите получать данные вызов функции автоматически при отправке данных из первого компонента 

displayChanges($firstComponentData){
  var yourData= firstComponentData;
  //your code
}
...