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

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

117
angular angular2-changedetection

3 ответов

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

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

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

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

164

tx, нашел обходной путь, который мне нужен:

  constructor(private zone:NgZone) {
    // enable to for time travel
    this.appStore.subscribe((state) => {
        this.zone.run(() => {
            console.log('enabled time travel');
        });
    });

запуск зоны.run заставит компонент повторно отобразить

37

ChangeDetectorRef approach

import { Component, OnInit, ChangeDetectorRef } from '@angular/core';


    constructor(private cdr: ChangeDetectorRef) { }



    selected(item: any) {
    if (item == 'Department')
        this.isDepartment = true;
    else
        this.isDepartment = false;
    this.cdr.detectChanges();
      }
2