在Angular 5中,可以使用服务(service)来在兄弟组件之间传递数据。以下是一个示例:
data.service.ts
的服务文件,并在其中定义一个名为data
的可观察对象。该对象将用于存储要在兄弟组件之间传递的数据。import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
@Injectable()
export class DataService {
private data = new BehaviorSubject(''); // 初始化一个空字符串
getData() {
return this.data.asObservable();
}
setData(newData: string) {
this.data.next(newData);
}
}
DataService
服务,并使用setData()
方法将数据发送给兄弟组件。import { Component } from '@angular/core';
import { DataService } from './data.service';
@Component({
selector: 'app-sender',
template: `
`
})
export class SenderComponent {
message = '';
constructor(private dataService: DataService) {}
sendMessage() {
this.dataService.setData(this.message);
}
}
DataService
服务,并使用getData()
方法来订阅数据的变化。import { Component } from '@angular/core';
import { DataService } from './data.service';
@Component({
selector: 'app-receiver',
template: `
接收到的消息: {{ receivedMessage }}
`
})
export class ReceiverComponent {
receivedMessage = '';
constructor(private dataService: DataService) {}
ngOnInit() {
this.dataService.getData().subscribe(message => {
this.receivedMessage = message;
});
}
}
现在,当在发送组件中输入文本并点击发送按钮时,接收组件将接收到发送的消息,并将其显示在页面上。
请注意,在使用这种方法时,需要将DataService
服务添加到模块的providers
数组中,以使其成为全局可用的服务。
希望以上解决方法能够帮助到您!