要在Angular中更改服务变量并更新另一个组件,可以使用Angular的服务和订阅机制。以下是一个示例:
data.service.ts
的服务文件,并在其中定义一个可观察的变量:import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
@Injectable()
export class DataService {
private messageSource = new BehaviorSubject("default message");
currentMessage = this.messageSource.asObservable();
constructor() { }
changeMessage(message: string) {
this.messageSource.next(message);
}
}
changeMessage
方法更改变量的值:import { Component } from '@angular/core';
import { DataService } from './data.service';
@Component({
selector: 'app-component1',
template: `
`
})
export class Component1 {
constructor(private dataService: DataService) { }
updateMessage() {
this.dataService.changeMessage("New message from Component 1");
}
}
currentMessage
可观察变量订阅变化:import { Component, OnInit } from '@angular/core';
import { DataService } from './data.service';
@Component({
selector: 'app-component2',
template: `
{{ message }}
`
})
export class Component2 implements OnInit {
message: string;
constructor(private dataService: DataService) { }
ngOnInit() {
this.dataService.currentMessage.subscribe(message => this.message = message);
}
}
现在,当在Component1
中点击按钮并调用changeMessage
方法时,Component2
中的message
变量将被更新并展示新的消息。