以不同的角度分量显示数据

Question

有人可以给我一个工作示例（或让我参考一个）来说明 Angular 中的此功能：

组件 A：从服务器获取数据（用户在输入字段中输入一个单词，服务器以一些定义响应）

组件B：从服务器接收到的数据将显示在该组件中。

由于某种原因，我无法将数据显示在从服务器获取数据的组件之外的另一个组件中。

更多详情：我在这里发布了问题：Angular: How to redirect into another page upon submit

我有一个服务可以在组件之间共享数据，但我的问题是如何将从服务器接收到的数据从组件 A 传递到组件 B？

Answer 1

根据 Angular 文档，可以使用以下方式在组件之间共享数据：

• Pass data from parent to child with input binding
• Parent listens for child event
• Parent and children communicate via a service

文档中的第三个示例显示了父子之间的通信，因此这里是两个兄弟组件通过服务共享数据的示例。 Stackblitz Example

首先，使用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。该组件使用两种通信方法，EventEmitters 和 @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;
  }
}

然后在app组件模板中监听dataLoaded事件，并设置app组件的数据。

app.component.html

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

为了向SecondComponent 获取数据，当FirstComponent 订阅数据并将其发送到其父组件时，FirstComponent 还可以将该数据发送回服务，该服务将数据放入另一个 Observable 中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>

Answer 2

试试这个

导入模块。

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
}

Answer 3

这就是服务的用途。

服务会被实例化一次并且永远不会被删除。当您通过依赖注入将它们插入到组件中时，您总是会得到相同的实例。

把它想象成一个单身人士。 您可以将数据保存在服务内的变量中。组件 A 和 B 可以访问它，并且您确定访问的数据在两个组件中是相同的。