在Angular中,当订阅的变量发生更改时,HTML组件不会触发更新,这可能是因为变量的更改不会被Angular的变化检测机制所察觉。为了解决这个问题,可以使用ChangeDetectorRef
来手动触发变化检测。
下面是一个解决方法的示例代码:
在组件的构造函数中注入ChangeDetectorRef
:
import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
@Component({
selector: 'app-my-component',
template: `
{{ myVariable }}
`
})
export class MyComponent implements OnInit {
myVariable: string;
constructor(private cdr: ChangeDetectorRef) { }
ngOnInit() {
// 在.subscribe()中更改关联的变量
this.myObservable.subscribe((data) => {
this.myVariable = data;
// 手动触发变化检测
this.cdr.detectChanges();
});
}
}
在上面的示例中,当myObservable
的数据发生变化时,subscribe()
内部的回调函数会更新myVariable
的值。然后,我们手动调用this.cdr.detectChanges()
来通知Angular进行变化检测,从而更新HTML组件中的内容。
这样,当关联的变量发生更改时,HTML组件也会相应地触发更新。