在Angular中,可以使用以下几种方法进行组件之间的数据共享:
父组件:
import { Component } from '@angular/core';
@Component({
selector: 'app-parent',
template: `
Parent Component
Data from Child Component: {{ childData }}
`,
})
export class ParentComponent {
parentData: string = 'Hello from parent component';
childData: string;
onDataChanged(data: string) {
this.childData = data;
}
}
子组件:
import { Component, Input, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'app-child',
template: `
Child Component
Data from Parent Component: {{ data }}
`,
})
export class ChildComponent {
@Input() data: string;
@Output() dataChanged: EventEmitter = new EventEmitter();
changeData() {
this.dataChanged.emit('Data changed from child component');
}
}
共享服务:
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root',
})
export class DataService {
sharedData: string = 'Shared data';
updateData(newData: string) {
this.sharedData = newData;
}
}
组件:
import { Component } from '@angular/core';
import { DataService } from './data.service';
@Component({
selector: 'app-component1',
template: `
Component 1
Data from Service: {{ dataService.sharedData }}
`,
})
export class Component1Component {
constructor(public dataService: DataService) {}
updateData() {
this.dataService.updateData('Updated data from Component 1');
}
}
@Component({
selector: 'app-component2',
template: `
Component 2
Data from Service: {{ dataService.sharedData }}
`,
})
export class Component2Component {
constructor(public dataService: DataService) {}
updateData() {
this.dataService.updateData('Updated data from Component 2');
}
}
发送组件:
import { Component } from '@angular/core';
import { Router } from '@angular/router';
@Component({
selector: 'app-sender',
template: `
Sender Component
`,
})
export class SenderComponent {
constructor(private router: Router) {}
sendData() {
this.router.navigate(['/receiver'], { queryParams: { data: 'Shared data' } });
}
}
接收组件:
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-receiver',
template: `
Receiver Component
Data from Sender Component: {{ data }}
`,
})
export class ReceiverComponent implements OnInit {
data: string;
constructor(private route: ActivatedRoute) {}
ngOnInit() {
this.route.queryParams.subscribe(params => {
this.data = params['data'];
});
}
}
以上是一些常用的在Angular中实现组件之间的数据共享的方法,可以根