在Angular 6中,你可以使用RxJS的Subject来检测变量的更改。下面是一个示例:
data.service.ts
,并导入RxJS的Subject:import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';
@Injectable()
export class DataService {
// 创建一个Subject来保存变量的值
private variableSource = new Subject();
// 创建一个可观察对象来订阅变量的更改
variable$ = this.variableSource.asObservable();
updateVariable(value: string) {
// 当变量更改时,调用next()方法将新值发送给订阅者
this.variableSource.next(value);
}
}
DataService
服务,例如app.component.ts
:import { Component } from '@angular/core';
import { DataService } from './data.service';
@Component({
selector: 'app-root',
template: `
{{ variable }}
`
})
export class AppComponent {
variable: string;
constructor(private dataService: DataService) {
// 订阅DataService服务的变量$
this.dataService.variable$.subscribe(value => {
this.variable = value;
});
}
updateVariable() {
// 调用DataService服务的updateVariable()方法来更新变量的值
this.dataService.updateVariable('New Value');
}
}
DataService
服务提供给应用程序,例如app.module.ts
:import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { DataService } from './data.service';
@NgModule({
imports: [BrowserModule],
declarations: [AppComponent],
providers: [DataService],
bootstrap: [AppComponent]
})
export class AppModule { }
通过这种方式,当调用updateVariable()
方法时,variableSource
的订阅者将会收到新值,并在模板中更新变量的值。