Як змусити повторне відображення компонента в куті 2?

Як змусити повторне відображення компонента в куті 2? Для цілей налагодження роботи з Redux я хотів би змусити компонент повторно переглянути його перегляд, чи це можливо?

Відображення відбувається після виявлення змін. Щоб примусити виявлення змін, щоб значення властивостей компонентів поширилися на DOM (і тоді браузер видасть ці зміни у представленні), ось кілька варіантів:

• ApplicationRef.tick () - схожий на Angular 1's $rootScope.$digest()- тобто перевірити повне дерево компонентів
• NgZone.run (зворотний виклик) - подібний $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()може бути дуже важливим. Вам потрібно повністю зрозуміти життєвий цикл і те, як саме функціонує ваша програма та відображає її компоненти. Тут немає замінника, щоб повністю виконати домашнє завдання та переконатися, що ви розумієте кутовий життєвий цикл зсередини. Потім, як тільки ви зрозумієте це, ви можете використовувати ChangeDetectorRef.detectChanges()відповідним чином (іноді дуже просто зрозуміти, де слід його використовувати, в іншому випадку це може бути дуже складно).