要在Angular 5中从一个组件传递数据到另一个组件,可以使用以下方法:
在源组件中:
import { Component, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'source-component',
template: `
`
})
export class SourceComponent {
@Output() dataEvent = new EventEmitter();
sendData() {
const data = '要传递的数据';
this.dataEvent.emit(data);
}
}
在目标组件中:
import { Component, Input } from '@angular/core';
@Component({
selector: 'target-component',
template: `
接收到的数据:{{ receivedData }}
`
})
export class TargetComponent {
@Input() receivedData: string;
}
在父组件中使用这两个组件:
在父组件的typescript文件中,定义一个变量来接收数据:
import { Component } from '@angular/core';
@Component({
selector: 'app-parent-component',
template: `
`
})
export class ParentComponent {
data: string;
receiveData(data: string) {
this.data = data;
}
}
共享服务:
import { Injectable } from '@angular/core';
@Injectable()
export class DataService {
private data: string;
setData(data: string) {
this.data = data;
}
getData(): string {
return this.data;
}
}
在源组件中注入共享服务,并将数据存储在共享服务中:
import { Component } from '@angular/core';
import { DataService } from './data.service';
@Component({
selector: 'source-component',
template: `
`
})
export class SourceComponent {
constructor(private dataService: DataService) {}
sendData() {
const data = '要传递的数据';
this.dataService.setData(data);
}
}
在目标组件中注入共享服务,并获取数据:
import { Component } from '@angular/core';
import { DataService } from './data.service';
@Component({
selector: 'target-component',
template: `
接收到的数据:{{ receivedData }}
`
})
export class TargetComponent {
receivedData: string;
constructor(private dataService: DataService) {}
ngOnInit() {
this.receivedData = this.dataService.getData();
}
}
在父组件的模板中使用这两个组件:
在父组件的typescript文件中,将共享服务添加到providers中:
import { Component } from '@angular/core';
import { DataService } from './data.service';
@Component({
selector: 'app-parent-component',
template: `
`,
providers: [DataService]
})
export class ParentComponent {}
这些方法可以根据你的具体需求选择使用。