Angular 角度微前端-需要添加强制更改检测,以便在插入时刷新视图
我们有以下技术堆栈- 角度微前端库-角度9 主机UI角度报告-角度7 目前,当我们独立运行micro前端时,组件变量更改视图将刷新。 但当我们通过将其作为组件添加到主机UI中时- 然后,我们会发现组件变量的变化不会反映在视图内部的变化中 我们必须为它添加数据以获取更改- this.changedetection.detectChanges() 但这有时会极大地影响UI性能—例如,如果代码在10毫秒内运行—那么对于一个组件来说,它也可能在20秒钟内运行。 根据我们的观察,我们检查了它是否在角区,发现它在角区,因为这是它不被刷新的常见原因。 它不起作用的地方之一如下-Angular 角度微前端-需要添加强制更改检测,以便在插入时刷新视图,angular,angular7,web-component,angular9,angular-changedetection,Angular,Angular7,Web Component,Angular9,Angular Changedetection,我们有以下技术堆栈- 角度微前端库-角度9 主机UI角度报告-角度7 目前,当我们独立运行micro前端时,组件变量更改视图将刷新。 但当我们通过将其作为组件添加到主机UI中时- 然后,我们会发现组件变量的变化不会反映在视图内部的变化中 我们必须为它添加数据以获取更改- this.changedetection.detectChanges() 但这有时会极大地影响UI性能—例如,如果代码在10毫秒内运行—那么对于一个组件来说,它也可能在20秒钟内运行。 根据我们的观察,我们检查了它是否在角区,发
ngOnInit(): void {
this.setEditAnnotationValidation();
const getValSubscription: Subscription = this.sharedService.getValue()
.subscribe((data) => {
if (Array.isArray(data)) {
data = data.filter(v => v.annotationType !== ANNOTATION_TYPES.GROUP_LABEL);
this.annotationObject = data;
} else {
// Other business logic
}
console.log('IS INA NGZONE' , NgZone.isInAngularZone());
// Had to add maual change detection
this.changedetection.detectChanges();
this.annotationObjectCopy = JSON.parse(JSON.stringify(this.annotationObject));
this.subscriptionList.push(getValSubscription);
});
请帮助我们了解它被破坏的可能原因&我们如何消除手动放置更改检测的额外开销