在缺少直接连接的组件之间传递数据时,例如兄弟姐妹,孙子孙等,您应该使用共享服务 .
您可以尝试以下代码段 .
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
@Injectable()
export class SharedService {
private messageSource = new BehaviorSubject("list");
currentMessage = this.messageSource.asObservable();
constructor() { }
changeMessage(message: string) {
this.messageSource.next(message)
}
}
//器Comp1
import { Component, OnInit } from '@angular/core';
import {SharedService} from '../shared.service';
@Component({
selector: 'app-comp1',
templateUrl: './comp1.component.html',
styleUrls: ['./comp1.component.css']
})
export class Comp1Component implements OnInit {
message:string;
constructor(private data: SharedService) {
}
ngOnInit() {
this.data.currentMessage.subscribe(message => this.message = message)
console.log(this.message);
}
}
//器Comp2
import { Component, OnInit } from '@angular/core';
import {SharedService} from '../shared.service';
@Component({
selector: 'app-comp2',
templateUrl: './comp2.component.html',
styleUrls: ['./comp2.component.css']
})
export class Comp2Component implements OnInit {
message:string;
constructor(private data: SharedService) { }
ngOnInit() {
this.data.currentMessage.subscribe(message => this.message = message)
console.log(this.message);
}
}
本文介绍了一种在Angular应用中不同组件间通过共享服务传递数据的方法。具体展示了如何创建一个共享服务并利用BehaviorSubject实现兄弟组件间的通信。此方案适用于需要跨多个层级组件进行消息传递的场景。
530

被折叠的 条评论
为什么被折叠?



