在Angular 6中,字符串插值不会自动更新DOM,而innerHTML
属性会更新DOM。如果您想要在字符串插值后更新DOM,可以使用Angular的变更检测机制手动触发变更检测。
以下是一个示例解决方法:
在组件的模板中,使用字符串插值来显示变量的值:
{{myString}}
在组件的类中,将变量定义为公共属性,并在需要更新DOM时手动触发变更检测:
import { Component, ChangeDetectorRef } from '@angular/core';
@Component({
selector: 'app-my-component',
templateUrl: './my-component.component.html'
})
export class MyComponent {
myString: string = 'Hello';
constructor(private cdr: ChangeDetectorRef) {}
updateString() {
this.myString = 'World';
this.cdr.detectChanges(); // 手动触发变更检测
}
}
在上面的示例中,当调用updateString
方法时,将更新myString
的值为'World'
,然后手动触发变更检测,以更新DOM。
请注意,在Angular中,推荐使用数据绑定来更新DOM,而不是依赖手动触发变更检测。使用数据绑定可以更好地利用Angular的变更检测机制,并提供更好的性能。