有人可以给我一个工作实例（或参考我），它在Angular中说明了这个功能：
组件A：从服务器获取数据（用户在输入字段中输入单词，服务器以某种定义响应）
组件B：从服务器接收的数据将显示在此组件中。
出于某种原因，我无法将数据显示在另一个组件中，而不是从服务器获取的组件。
更多细节：我在这里发布了一个问题：Angular: How to redirect into another page upon submit
我有一个服务来共享组件之间的数据，但我的问题是如何将从服务器接收的数据从组件A传递到组件B？
从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。该组件使用两种通信方法，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;
}
}
然后在应用程序组件模板中侦听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>
试试这个
导入模块。
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
}
这就是服务的用途。
服务实例化一次，永远不会被删除。当您通过依赖注入将它们插入到组件中时，您将始终获得相同的实例。
把它想象成一个单身人士。您可以将数据保存在服务内的变量中。组件A和组件B可以访问它，并且您确信所访问的数据在两个组件中都是相同的。