Question

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

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

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

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

有关更多详细信息：我在此处发布了问题：Angular: How to redirect into another page upon submit

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

Answer 1

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

文档中的第三个示例显示了父子之间的通信，因此这里是两个同级组件通过服务共享数据的示例。 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。该组件使用两种通信方式，即EventEmitter和@Output()以及在服务上设置数据以供其他组件订阅。

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可以订阅的另一个Observable中。

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>

现在在您想接收数据的secound组件中执行您的功能从第一个组件发出数据时自动调用函数

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

Answer 3

这是服务的目的。

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

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

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

3 个答案: