如何在Angular 2中强制组件重新渲染? 为了调试目的与Redux工作,我想强制一个组件重新渲染它的视图,这是可能的吗?
当前回答
呈现发生在变更检测之后。要强制更改检测,以便组件属性值的更改被传播到DOM(然后浏览器将在视图中呈现这些更改),以下是一些选项:
ApplicationRef.tick()——类似于Angular 1的$rootScope.$digest()——即检查完整的组件树 NgZone.run(回调)——类似于$rootScope.$apply(回调)——也就是说,计算Angular 2 zone内的回调函数。我认为,但我不确定,在执行回调函数后,这最终会检查完整的组件树。 ChangeDetectorRef.detectChanges()——类似于$scope.$digest()——也就是说,只检查这个组件及其子组件
你需要导入并注入ApplicationRef, NgZone或ChangeDetectorRef到你的组件中。
对于您的特定场景,如果只更改了一个组件,我建议使用最后一个选项。
其他回答
这里的其他答案提供了触发更改检测周期的解决方案,该周期将更新组件的视图(这与完全重新渲染不同)。
完全重渲染,这将破坏和重新初始化组件(调用所有生命周期钩子和重建视图)可以通过以下方式使用ng-template, ng-container和ViewContainerRef完成:
<div>
<ng-container #outlet >
</ng-container>
</div>
<ng-template #content>
<child></child>
</ng-template>
然后在同时引用#outlet和#content的组件中,我们可以清除outlet的内容并插入另一个子组件实例:
@ViewChild("outlet", {read: ViewContainerRef}) outletRef: ViewContainerRef;
@ViewChild("content", {read: TemplateRef}) contentRef: TemplateRef<any>;
private rerender() {
this.outletRef.clear();
this.outletRef.createEmbeddedView(this.contentRef);
}
此外,初始内容应该插入AfterContentInit钩子:
ngAfterContentInit() {
this.outletRef.createEmbeddedView(this.contentRef);
}
完整的解决方案可以在这里找到https://stackblitz.com/edit/angular-component-rerender。
tx,发现我需要的解决方案:
constructor(private zone:NgZone) {
// enable to for time travel
this.appStore.subscribe((state) => {
this.zone.run(() => {
console.log('enabled time travel');
});
});
运行zone.run将强制组件重新呈现
呈现发生在变更检测之后。要强制更改检测,以便组件属性值的更改被传播到DOM(然后浏览器将在视图中呈现这些更改),以下是一些选项:
ApplicationRef.tick()——类似于Angular 1的$rootScope.$digest()——即检查完整的组件树 NgZone.run(回调)——类似于$rootScope.$apply(回调)——也就是说,计算Angular 2 zone内的回调函数。我认为,但我不确定,在执行回调函数后,这最终会检查完整的组件树。 ChangeDetectorRef.detectChanges()——类似于$scope.$digest()——也就是说,只检查这个组件及其子组件
你需要导入并注入ApplicationRef, NgZone或ChangeDetectorRef到你的组件中。
对于您的特定场景,如果只更改了一个组件,我建议使用最后一个选项。
ChangeDetectorRef方法
import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
export class MyComponent {
constructor(private cdr: ChangeDetectorRef) { }
selected(item: any) {
if (item == 'Department')
this.isDepartment = true;
else
this.isDepartment = false;
this.cdr.detectChanges();
}
}
我使用*ngIf强制重载组件。
容器中的所有组件都返回到完整生命周期钩子。
在模板中:
<ng-container *ngIf="_reload">
components here
</ng-container>
然后在ts文件中:
public _reload = true;
private reload() {
setTimeout(() => this._reload = false);
setTimeout(() => this._reload = true);
}
推荐文章
- NullInjectorError: AngularFirestore没有提供程序
- 如何在Angular2中截断文本?
- 如何在Angular2 ngSwitch语句中使用typescript enum值
- Angular CLI错误:serve命令需要在Angular项目中运行,但是找不到项目定义
- 找到合成属性@panelState。请在您的应用程序中包含“BrowserAnimationsModule”或“NoopAnimationsModule”。
- 在Angular中上传文件?
- 模板驱动表单和响应式表单之间的实际区别是什么?
- Angular 2+和debounce
- 如何以及在哪里使用::ng-deep?
- 禁用在角材质对话框区域外单击以关闭对话框(angular 4.0+版本)
- Angular 2模板中的标签是什么意思?
- 如何扩展/继承组件?
- 属性“of”在类型“typeof”的Observable上不存在
- 如何设置<iframe src="…">没有引起'不安全值'异常?
- 何时使用“npm start”,何时使用“ng serve”?