在Angular 6中,指令属性不会动态变化的问题通常是由于变化检测机制引起的。解决这个问题的一种方法是使用ChangeDetectorRef
来手动触发变化检测。
首先,确保在指令中注入ChangeDetectorRef
:
import { Directive, Input, ChangeDetectorRef } from '@angular/core';
@Directive({
selector: '[myDirective]'
})
export class MyDirective {
@Input() myProperty: string;
constructor(private cdr: ChangeDetectorRef) { }
// ...
}
然后,在属性发生变化时,手动触发变化检测:
import { Directive, Input, ChangeDetectorRef } from '@angular/core';
@Directive({
selector: '[myDirective]'
})
export class MyDirective {
@Input() myProperty: string;
constructor(private cdr: ChangeDetectorRef) { }
ngOnChanges() {
this.cdr.detectChanges();
}
// ...
}
通过调用detectChanges()
方法,可以强制Angular重新检查指令的绑定,并更新相应的视图。这样,当属性发生变化时,指令的视图也会相应地更新。
注意:ChangeDetectorRef
是一个相对较重的操作,因此不要过度使用它。只在需要时手动触发变化检测。