如何在Angular 2中强制组件的重新渲染？为了与Redux一起进行调试，我想强制组件重新呈现其视图，这可能吗？
Answers:
渲染在更改检测后发生。为了强制进行更改检测，以便将已更改的组件属性值传播到DOM（然后浏览器将在视图中呈现这些更改），以下是一些选项：
$rootScope.$digest()-即，检查整个组件树$rootScope.$apply(callback)-即，在Angular 2区域内评估回调函数。我认为，但我不确定，执行完回调函数后最终检查整个组件树。$scope.$digest()-即仅检查此组件及其子级您将需要进口，然后注射ApplicationRef，NgZone或ChangeDetectorRef到您的组件。
对于您的特定情况，如果仅更改了一个组件，我建议使用最后一个选项。
this is the first time I am facing an update not working in ng2。更改检测策略是默认的，所以我知道我还没有弄明白更改检测策略。
this在POST回调中未使用适当的上下文。
pure:false在管道中使用。它可以工作，但是对于我的用例来说太贵了（效率低下）。
TX，找到我需要的解决方法：
constructor(private zone:NgZone) {
// enable to for time travel
this.appStore.subscribe((state) => {
this.zone.run(() => {
console.log('enabled time travel');
});
});
运行zone.run将强制组件重新渲染
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);
}
setTimeout()。现在我的正在使用一个简单轻巧的解决方案！
这里的其他答案提供了触发变更检测周期的解决方案，这些周期将更新组件的视图（与完全重新渲染不同）。
完全重新绘制，这将破坏并重新初始化组件（调用所有生命周期挂钩，并重建视图）可以通过使用来完成ng-template，ng-container并且ViewContainerRef在下列方式：
<div>
<ng-container #outlet >
</ng-container>
</div>
<ng-template #content>
<child></child>
</ng-template>
然后在同时引用这两个组件的组件中#outlet，#content我们可以清除出口的内容并插入子组件的另一个实例：
@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找到。
ChangeDetectorRef.detectChanges()通常是最专注的方法。ApplicationRef.tick()通常不是大锤的方法。
要使用ChangeDetectorRef.detectChanges()，您需要在组件顶部：
import { ChangeDetectorRef } from '@angular/core';
...然后，通常在将其注入到构造函数中时使用如下别名：
constructor( private cdr: ChangeDetectorRef ) { ... }
然后，在适当的位置，将其命名为：
this.cdr.detectChanges();
当你打电话ChangeDetectorRef.detectChanges()可以非常显著。您需要完全了解生命周期，以及您的应用程序如何正常运行以及如何呈现其组件。这里没有替代品可以完全完成您的作业并确保您了解内在的Angular生命周期。然后，一旦您了解了这一点，就可以ChangeDetectorRef.detectChanges()适当地使用它了（有时很容易理解应在何处使用它，有时它可能非常复杂）。