在Angular中,可以通过以下方法共享两个组件之间的数据:
父组件:
import { Component } from '@angular/core';
@Component({
selector: 'app-parent',
template: `
Parent Component
Data from child: {{ childData }}
`
})
export class ParentComponent {
parentData: string = 'Hello from parent';
childData: string;
updateChildData(data: string) {
this.childData = data;
}
}
子组件:
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-child',
template: `
Child Component
Data from parent: {{ parentData }}
`
})
export class ChildComponent {
@Input() parentData: string;
updateParentData() {
this.parentData = 'Hello from child';
}
}
共享服务:
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
@Injectable()
export class DataService {
private dataSubject = new BehaviorSubject('Initial data');
data$ = this.dataSubject.asObservable();
updateData(data: string) {
this.dataSubject.next(data);
}
}
组件A:
import { Component } from '@angular/core';
import { DataService } from './data.service';
@Component({
selector: 'app-component-a',
template: `
Component A
Data from service: {{ data }}
`
})
export class ComponentAComponent {
data: string;
constructor(private dataService: DataService) {
this.dataService.data$.subscribe(data => {
this.data = data;
});
}
updateData() {
this.dataService.updateData('Updated data from Component A');
}
}
组件B:
import { Component } from '@angular/core';
import { DataService } from './data.service';
@Component({
selector: 'app-component-b',
template: `
Component B
Data from service: {{ data }}
`
})
export class ComponentBComponent {
data: string;
constructor(private dataService: DataService) {
this.dataService.data$.subscribe(data => {
this.data = data;
});
}
updateData() {
this.dataService.updateData('Updated data from Component B');
}
}
请注意,如果使用了服务进行组件间通信,需要在根模块的提供商中注册该服务,以便在整个应用程序中共享数据。