Açısal 2'de bir bileşenin yeniden oluşturulmasını nasıl zorlarsınız?

Açısal 2'de bir bileşenin yeniden oluşturulmasını nasıl zorlarsınız? Redux ile çalışan hata ayıklama amaçları için, bir bileşeni görünümünü yeniden oluşturmaya zorlamak istiyorum, bu mümkün mü?

Oluşturma, değişiklik algılandıktan sonra gerçekleşir. Değişiklik algılamayı zorlamak için, değişen bileşen özellik değerleri DOM'ye yayılır (ve ardından tarayıcı bu değişiklikleri görünümde oluşturur), bazı seçenekler şunlardır:

• ApplicationRef.tick () - Açısal 1'lere benzer $rootScope.$digest()- yani, tüm bileşen ağacını kontrol edin
• NgZone.run (geri arama) - benzeri$rootScope.$apply(callback) - yani, Açısal 2 bölgesindeki geri arama işlevini değerlendirin. Bence, ama emin değilim, bu geri arama işlevini yürüttükten sonra tam bileşen ağacı kontrol sonuçlanır.
• ChangeDetectorRef.detectChanges () - benzeri $scope.$digest()- yani, yalnızca bu bileşeni ve alt öğelerini denetleyin

İçe ve sonra enjekte gerekecektir ApplicationRef, NgZoneya ChangeDetectorRefda bileşen içine.

Belirli bir senaryo için, yalnızca tek bir bileşen değişmişse son seçeneği tavsiye ederim.

tx, ihtiyacım olan geçici çözümü buldu:

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

running zone.run bileşeni yeniden oluşturmaya zorlar

ChangeDetectorRef yaklaşımı

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 kullanarak bileşenimi yeniden yüklemeye zorlarım.

Kabımın içindeki tüm bileşenler, tüm kullanım ömrü kancalarına geri döner.

Şablonda:

<ng-container *ngIf="_reload">
    components here 
</ng-container>

Sonra ts dosyasında:

public _reload = true;

private reload() {
    setTimeout(() => this._reload = false);
    setTimeout(() => this._reload = true);
}

Buradaki diğer yanıtlar, bileşenin görünümünü (tam yeniden oluşturma ile aynı olmayan) güncelleyecek değişiklik algılama döngülerini tetiklemeye yönelik çözümler sunar.

Tam kullanılarak yapılabilir yok etmek ve bileşen (görünüm tüm yaşam döngüsü kanca arama ve yeniden inşa) yeniden başlatmak hangi yeniden işlemek ng-template, ng-containerve ViewContainerRefşu şekilde:

<div>
  <ng-container #outlet >
  </ng-container>
</div>

<ng-template #content>
  <child></child>
</ng-template>

Sonra bileşeninde hem referansı olan #outletve #contentbiz iki girişteki içeriği temizleyebilir ve çocuk bileşeninin başka örneğini ekleyebilirsiniz:

@ViewChild("outlet", {read: ViewContainerRef}) outletRef: ViewContainerRef;
@ViewChild("content", {read: TemplateRef}) contentRef: TemplateRef<any>;

private rerender() {
    this.outletRef.clear();
    this.outletRef.createEmbeddedView(this.contentRef);
}

Ek olarak, ilk içerik AfterContentInitkancaya eklenmelidir :

ngAfterContentInit() {
    this.outletRef.createEmbeddedView(this.contentRef);
}

Tam çalışma çözümüne https://stackblitz.com/edit/angular-component-rerender adresinden ulaşabilirsiniz.

ChangeDetectorRef.detectChanges() genellikle bunu yapmanın en odaklanmış yoludur. ApplicationRef.tick()genellikle bir balyoz yaklaşımıdır.

Kullanmak ChangeDetectorRef.detectChanges()için bileşeninizin üstünde buna ihtiyacınız olacak:

import {  ChangeDetectorRef } from '@angular/core';

... o zaman, genellikle yapıcıya böyle enjekte ettiğinizde takma adınız vardır:

constructor( private cdr: ChangeDetectorRef ) { ... }

Sonra, uygun yerde , şöyle deyin:

this.cdr.detectChanges();

Nerede aramak ChangeDetectorRef.detectChanges()son derece önemli olabilir. Buna gerek tamamen yaşam döngüsünü anlamak ve tam olarak uygulama işleyen ve bileşenlerini render nasıl. Burada ödevinizi tamamen yapmak ve Açısal yaşam döngüsünü içeriden anladığınızdan emin olmak için bir yedek yoktur. Sonra, bunu anladıktan sonra, ChangeDetectorRef.detectChanges()uygun şekilde kullanabilirsiniz (bazen nerede kullanmanız gerektiğini anlamak çok kolaydır, diğer zamanlarda çok karmaşık olabilir).