วิธีการบังคับให้มีการเรนเดอร์องค์ประกอบใหม่ใน Angular 2

วิธีการบังคับให้มีการเรนเดอร์องค์ประกอบใหม่ใน Angular 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');
        });
    });

running 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

ส่วนประกอบทั้งหมดภายในคอนเทนเนอร์ของฉันกลับไปที่ hooks lifecycle แบบเต็ม

ในเทมเพลต:

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

จากนั้นในไฟล์ ts:

public _reload = true;

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

คำตอบอื่น ๆ ที่นี่มีวิธีแก้ปัญหาสำหรับการทริกเกอร์รอบการตรวจจับการเปลี่ยนแปลงที่จะอัปเดตมุมมองของส่วนประกอบ (ซึ่งไม่เหมือนกับการแสดงผลซ้ำทั้งหมด)

เต็มรูปแบบอีกครั้งทำให้ซึ่งจะทำลายและ reinitialize ส่วนประกอบ (เรียกตะขอวงจรชีวิตและการสร้างมุมมอง) สามารถทำได้โดยใช้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);
}

นอกจากนี้เนื้อหาเริ่มต้นควรถูกแทรกลงในAfterContentInithook:

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()อย่างเหมาะสม (บางครั้งมันง่ายที่จะเข้าใจว่าคุณควรใช้ที่ใดเวลาอื่นก็ซับซ้อนมาก)