如果你发现Angular组件的视图没有随着数据的更改而更新,可能是因为你没有在组件中使用正确的变更检测策略。默认情况下,Angular使用的是OnPush策略,它只会在输入属性发生变化时才更新组件。
如果你使用的是OnPush策略,并且想要在组件内部更改数据并更新视图,请调用ChangeDetectorRef的detectChanges方法。
以下是一个使用OnPush策略并手动触发变更检测的示例:
@Component({
selector: 'app-example',
template:
,
changeDetection: ChangeDetectionStrategy.OnPush
})
export class ExampleComponent {
@Input() title: string;{{ title }}
constructor(private cdr: ChangeDetectorRef) {}
changeTitle() { this.title = 'New Title'; this.cdr.detectChanges(); } }
在上面的示例中,当用户单击“更改标题”按钮时,组件的标题属性将更新为“新标题”,并且调用detectChanges方法来手动触发变更检测。这将导致组件视图中的绑定被更新。
上一篇:Angular组件不发生更改