在Angular中,可以使用服务来在组件之间共享数据。以下是一个基本的示例:
data.service.ts
的服务文件,用于共享数据。import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class DataService {
private data = new BehaviorSubject(''); // 初始化一个BehaviorSubject,用于共享数据
currentData = this.data.asObservable(); // 定义一个可观察的数据流用于订阅
constructor() { }
changeData(newData: string) {
this.data.next(newData); // 更新共享数据
}
}
DataService
。import { Component, OnInit } from '@angular/core';
import { DataService } from 'path/to/data.service';
@Component({
selector: 'app-component1',
template: `
Component 1
`
})
export class Component1Component {
sharedData: string;
constructor(private dataService: DataService) { }
updateData() {
this.dataService.changeData(this.sharedData); // 更新共享数据
}
}
DataService
获取共享的数据。import { Component, OnInit } from '@angular/core';
import { DataService } from 'path/to/data.service';
@Component({
selector: 'app-component2',
template: `
Component 2
Shared Data: {{ sharedData }}
`
})
export class Component2Component implements OnInit {
sharedData: string;
constructor(private dataService: DataService) { }
ngOnInit() {
this.dataService.currentData.subscribe(data => {
this.sharedData = data; // 订阅共享数据流
});
}
}
这样,当在Component1
中输入框中输入数据时,会更新共享数据,并在Component2
中显示出来。