angular - कोणीय 2 में एक घटक के पुन: प्रतिपादन को कैसे बाध्य किया जाए?




angular2-changedetection (4)

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

}

कोणीय 2 में एक घटक के पुन: प्रतिपादन को कैसे बाध्य किया जाए? डीबग उद्देश्यों के लिए Redux के साथ काम करने के लिए मैं एक घटक को फिर से प्रस्तुत करने के लिए मजबूर करना चाहूंगा, क्या यह संभव है?


tx, मुझे आवश्यक वर्कअराउंड मिला:

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

ज़ोन चल रहा है ।un घटक को फिर से प्रस्तुत करने के लिए मजबूर करेगा


परिवर्तन का पता लगाने के बाद रेंडरिंग होता है। परिवर्तन का पता लगाने के लिए, ताकि घटक संपत्ति मूल्य जो बदल गए हैं, DOM (और फिर ब्राउज़र दृश्य में उन परिवर्तनों को प्रस्तुत करेगा) के लिए प्रचारित हो जाते हैं, यहां कुछ विकल्प दिए गए हैं:

  • ApplicationRef.tick() - Angular 1 के $rootScope.$digest() के समान $rootScope.$digest() - यानी, पूर्ण $rootScope.$digest() ट्री की जांच करें
  • NgZone.run(callback) - $rootScope.$apply(callback) समान $rootScope.$apply(callback) - यानी, Angular 2 ज़ोन के अंदर कॉलबैक फ़ंक्शन का मूल्यांकन करें। मुझे लगता है, लेकिन मुझे यकीन नहीं है, कि यह कॉलबैक फ़ंक्शन को निष्पादित करने के बाद पूर्ण घटक ट्री की जाँच करता है।
  • ChangeDetectorRef.detectChanges() - $scope.$digest() समान $scope.$digest() - अर्थात, केवल इस घटक और उसके बच्चों की जाँच करें

आपको अपने कंपोनेंट में ApplicationRef , NgZone , या ChangeDetectorRef को इम्पोर्ट और इम्पोर्ट करना होगा।

आपके विशेष परिदृश्य के लिए, मैं अंतिम विकल्प की सिफारिश करूंगा यदि केवल एक घटक बदल गया है।


मैं * ngIf का उपयोग करके अपने घटक को फिर से लोड करता हूं।

मेरे कंटेनर के अंदर सभी घटक पूर्ण जीवनचक्र के हुक पर वापस चले जाते हैं।

टेम्पलेट में:

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

फिर ts फ़ाइल में:

public _reload = true;

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




angular2-changedetection