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

Question

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

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

729 3

angular angular2-changedetection

3 ответов:

Comments

Ничего не найдено.

Mark Rajcok · Accepted Answer · 2018-08-17 22:06:08

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

ApplicationRef.ТИК() - похоже на угловой 1-х $rootScope.$digest() -- т. е. проверьте полное дерево компонентов

NgZone.run (обратный вызов) - аналогично $rootScope.$apply(callback) -- т. е. оценить обратный вызов функция внутри угловой зоны 2. Я думаю, но я не уверен, что это заканчивается проверкой полного дерева компонентов после выполнения функции обратного вызова.

ChangeDetectorRef.detectChanges () - аналогично $scope.$digest() -- т. е. проверьте только этот компонент и его дочерние элементы

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

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

born2net · Accepted Answer · 2016-01-30 20:42:29

tx, нашел обходной путь, который мне нужен:
  constructor(private zone:NgZone) {
    // enable to for time travel
    this.appStore.subscribe((state) => {
        this.zone.run(() => {
            console.log('enabled time travel');
        });
    });
запуск зоны.run заставит компонент повторно визуализировать

Feng Zhang · Accepted Answer · 2018-05-22 19:56:53

ChangeDetectorRef подход

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