Angular服务不会立即触发更改的解决方法是使用ChangeDetectorRef
来手动触发变更检测。
下面是一个例子,其中包含一个名为DataService
的服务,该服务具有一个名为data
的属性和一个名为updateData()
的方法。当调用updateData()
方法时,会改变data
属性的值,并且通过ChangeDetectorRef
手动触发变更检测。
import { Injectable, ChangeDetectorRef } from '@angular/core';
@Injectable()
export class DataService {
data: string = 'Initial value';
constructor(private changeDetectorRef: ChangeDetectorRef) {}
updateData(newValue: string) {
this.data = newValue;
this.changeDetectorRef.detectChanges(); // 手动触发变更检测
}
}
通过在组件中注入DataService
并调用updateData()
方法,可以触发变更检测,使组件中的绑定表达式等更新为最新的值。
import { Component } from '@angular/core';
import { DataService } from './data.service';
@Component({
selector: 'app-root',
template: `
{{ data }}
`,
})
export class AppComponent {
data: string;
constructor(private dataService: DataService) {}
updateData() {
this.dataService.updateData('New value');
this.data = this.dataService.data;
}
}
在上面的示例中,当点击按钮时,将调用updateData()
方法来更新data
属性的值,并且通过changeDetectorRef.detectChanges()
手动触发变更检测。然后,将更新后的值赋给组件的data
属性,使其在模板中显示为最新值。