在Angular 2中,有多种方法可以在组件之间传输数据。以下是一些解决方法的示例代码:
父组件:
import { Component } from '@angular/core';
@Component({
selector: 'parent-component',
template: `
`
})
export class ParentComponent {
parentData: string;
updateParentData(data: string) {
this.parentData = data;
}
}
子组件:
import { Component, Input, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'child-component',
template: `
`
})
export class ChildComponent {
@Input() data: string;
@Output() dataUpdated: EventEmitter = new EventEmitter();
childData: string;
updateParentData() {
this.data = this.childData;
this.dataUpdated.emit(this.data);
}
}
创建一个名为data.service.ts
的服务文件,其中包含一个BehaviorSubject
对象,用于存储和共享数据:
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
@Injectable({ providedIn: 'root' })
export class DataService {
private dataSubject: BehaviorSubject = new BehaviorSubject('');
getData() {
return this.dataSubject.asObservable();
}
setData(data: string) {
this.dataSubject.next(data);
}
}
父组件:
import { Component } from '@angular/core';
import { DataService } from './data.service';
@Component({
selector: 'parent-component',
template: `
`
})
export class ParentComponent {
constructor(private dataService: DataService) {}
updateData(data: string) {
this.dataService.setData(data);
}
}
子组件:
import { Component, OnInit } from '@angular/core';
import { DataService } from './data.service';
@Component({
selector: 'child-component',
template: `
{{ data }}
`
})
export class ChildComponent implements OnInit {
data: string;
constructor(private dataService: DataService) {}
ngOnInit() {
this.dataService.getData().subscribe(data => {
this.data = data;
});
}
}
请注意,上述示例中的代码仅用于演示目的,实际应用中可能会有所不同。