Как заставить рендеринг компонента в Angular 2?

Как заставить рендеринг компонента в Angular 2? В целях отладки, работая с Redux, я хотел бы заставить компонент перерисовать его представление, это возможно?

Рендеринг происходит после обнаружения изменений. Для принудительного обнаружения изменений, чтобы значения свойств компонентов, которые изменились, были переданы в DOM (а затем браузер отобразит эти изменения в представлении), вот несколько вариантов:

• ApplicationRef.tick () - аналогично Angular 1, $rootScope.$digest()т. Е. Проверить полное дерево компонентов
• NgZone.run (callback) - аналогично $rootScope.$apply(callback)- т.е. оценивает функцию обратного вызова внутри зоны Angular 2. Я думаю, но я не уверен, что это заканчивается проверкой полного дерева компонентов после выполнения функции обратного вызова.
• ChangeDetectorRef.detectChanges () - аналогично $scope.$digest()- т.е. проверять только этот компонент и его дочерние элементы

Вам нужно будет импортировать , а затем инъекционные ApplicationRef, NgZoneили ChangeDetectorRefв компонент.

Для вашего конкретного сценария я бы порекомендовал последний вариант, если изменился только один компонент.

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);
}

Другие ответы здесь предоставляют решения для запуска циклов обнаружения изменений, которые обновят представление компонента (что отличается от полного повторного рендеринга).

Полное повторное рендер, который уничтожит и переинициализировать компонент (вызов все крюки жизненный цикл и восстановление зрения) может быть сделано с помощью 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()соответствующим образом (иногда очень легко понять, где вы должны его использовать, в других случаях это может быть очень сложным).