在Angular 6中,可以使用服务来实现组件之间的数据共享。以下是一个简单的解决方法,其中包含了代码示例:
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class DataService {
private messageSource = new BehaviorSubject(''); // 创建一个 BehaviorSubject
currentMessage = this.messageSource.asObservable(); // 将 BehaviorSubject 转换为 Observable
constructor() { }
changeMessage(message: string) {
this.messageSource.next(message); // 通过 next 方法改变 BehaviorSubject 的值
}
}
import { Component, OnInit } from '@angular/core';
import { DataService } from './data.service';
@Component({
selector: 'app-component1',
template: `
`,
styleUrls: ['./component1.component.css']
})
export class Component1Component implements OnInit {
message: string;
constructor(private dataService: DataService) { }
ngOnInit() {
}
sendMessage() {
this.dataService.changeMessage(this.message); // 调用服务中的方法改变数据
}
}
import { Component, OnInit } from '@angular/core';
import { DataService } from './data.service';
@Component({
selector: 'app-component2',
template: `
{{ message }}
`,
styleUrls: ['./component2.component.css']
})
export class Component2Component implements OnInit {
message: string;
constructor(private dataService: DataService) { }
ngOnInit() {
this.dataService.currentMessage.subscribe(message => this.message = message); // 订阅数据变化
}
}
通过以上的代码示例,组件1可以通过数据共享的服务改变数据,组件2则可以通过订阅数据共享的服务来获取数据并展示。这样就实现了组件之间的数据共享。