javascript - कोणीय 2-जांच के बाद अभिव्यक्ति बदल गई है-आकार बदलने के साथ div चौड़ाई के लिए बाध्यकारी

अन्य तरीकों से मैंने इसे हल करने के लिए उपयोग किया:

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


@Component({
  selector: 'your-seelctor',
  template: 'your-template',
})

export class YourComponent{

  constructor(public cdRef:ChangeDetectorRef) { }

  ngAfterViewInit() {
    this.cdRef.detectChanges();
  }
}

अपनी समस्या को हल करने के लिए, आपको प्रत्येक आकार बदलने की घटना के बाद किसी घटक प्रॉपर्टी में div के आकार को प्राप्त करने और स्टोर करने की आवश्यकता होती है, और उस प्रॉपर्टी का उपयोग टेम्पलेट में करें। इस तरह, मूल्य निरंतर रहेगा जब परिवर्तन का दूसरा दौर देव मोड में चलता है।

मैं आपके टेम्पलेट में जोड़ने (window:resize) बजाय @HostListener का उपयोग करने की भी सलाह देता हूं। div संदर्भ प्राप्त करने के लिए हम @ViewChild का उपयोग करेंगे। और प्रारंभिक मान सेट करने के लिए हम जीवन चक्र हुक ngAfterViewInit() का उपयोग करेंगे।

import {Component, ViewChild, HostListener} from '@angular/core';

@Component({
  selector: 'my-app',
  template: `<div #widgetParentDiv class="Content">
    <p>Sample widget</p>
    <table><tr>
       <td>Value1</td>
       <td *ngIf="divWidth > 350">Value2</td>
       <td *ngIf="divWidth > 700">Value3</td>
      </tr>
    </table>`,
})
export class AppComponent {
  divWidth = 0;
  @ViewChild('widgetParentDiv') parentDiv:ElementRef;
  @HostListener('window:resize') onResize() {
    // guard against resize before view is rendered
    if(this.parentDiv) {
       this.divWidth = this.parentDiv.nativeElement.clientWidth;
    }
  }
  ngAfterViewInit() {
    this.divWidth = this.parentDiv.nativeElement.clientWidth;
  }
}

बहुत बुरा है कि काम नहीं करता है। हमें मिला

जांच के बाद अभिव्यक्ति बदल गई है। पिछला मान: 'झूठा'। वर्तमान मूल्य: 'सत्य'।

त्रुटि हमारे NgIf अभिव्यक्तियों के बारे में शिकायत कर रही है - पहली बार यह चलती है, divWidth 0 है, तो ngAfterViewInit() चलता है और मान को 0 के अलावा किसी अन्य चीज़ में बदलता है, फिर परिवर्तन पहचान का दूसरा दौर चलता है (देव मोड में)। शुक्र है, एक आसान / ज्ञात समाधान है, और यह एक बार एकमात्र मुद्दा है, ओपी में जारी एक जारी मुद्दा नहीं:

  ngAfterViewInit() {
    // wait a tick to avoid one-time devMode
    // unidirectional-data-flow-violation error
    setTimeout(_ => this.divWidth = this.parentDiv.nativeElement.clientWidth);
  }

ध्यान दें कि एक तकनीक का इंतजार करने की यह तकनीक यहां प्रलेखित है: https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#parent-to-view-child

अक्सर, ngAfterViewInit() और ngAfterViewChecked() हमें setTimeout() चाल को नियोजित करने की आवश्यकता होगी क्योंकि घटक के दृश्य के बाद इन विधियों को कॉल किया जाता है।

यहां एक काम करने वाला plunker ।

हम इसे बेहतर बना सकते हैं। मुझे लगता है कि हमें आकार बदलने की घटनाओं को थ्रॉटल करना चाहिए जैसे कि कोणीय परिवर्तन का पता लगाना, हर 100-250 एमएमएस कहता है, बल्कि हर बार एक आकार बदलने का आयोजन होता है। जब उपयोगकर्ता विंडो का आकार बदल रहा है, तो ऐप को आलसी होने से रोकना चाहिए, क्योंकि अभी, प्रत्येक आकार बदलने की घटना में परिवर्तन का पता लगाने का कारण बनता है (देव मोड में दो बार)। आप पिछले प्लंकर को निम्न विधि जोड़कर इसे सत्यापित कर सकते हैं:

ngDoCheck() {
   console.log('change detection');
}

@HostListener घटनाओं को आसानी से थ्रोटल कर सकते हैं, इसलिए आकार बदलने के लिए @HostListener का उपयोग करने के बजाय, हम एक अवलोकन कर सकते हैं:

Observable.fromEvent(window, 'resize')
   .throttleTime(200)
   .subscribe(_ => this.divWidth = this.parentDiv.nativeElement.clientWidth );

यह काम करता है, लेकिन ... इसके साथ प्रयोग करते समय, मैंने कुछ बहुत ही रोचक खोज की ... भले ही हम आकार बदलने की घटना को थ्रॉटल करते हैं, फिर भी एंजुलर चेंज डिटेक्शन तब भी चलता है जब एक आकार बदलने का आयोजन होता है। हां, थ्रॉटलिंग इस बात को प्रभावित नहीं करती है कि पहचान कितनी बार बदलती है। (टोबीस बॉश ने इसकी पुष्टि की: https://github.com/angular/angular/issues/1773#issuecomment-102078250 ।)

अगर घटना थ्रॉटल समय से गुजरती है तो मैं केवल रन को पहचानने के लिए बदलना चाहता हूं। और मुझे इस घटक पर चलाने के लिए केवल परिवर्तन पहचान की आवश्यकता है। समाधान कोणीय क्षेत्र के बाहर देखने योग्य बनाने के लिए है, फिर सदस्यता कॉलबैक के अंदर मैन्युअल रूप से परिवर्तन पहचान को कॉल करें:

constructor(private ngzone: NgZone, private cdref: ChangeDetectorRef) {}
ngAfterViewInit() {
  // set initial value, but wait a tick to avoid one-time devMode
  // unidirectional-data-flow-violation error
  setTimeout(_ => this.divWidth = this.parentDiv.nativeElement.clientWidth);
  this.ngzone.runOutsideAngular( () =>
     Observable.fromEvent(window, 'resize')
       .throttleTime(200)
       .subscribe(_ => {
          this.divWidth = this.parentDiv.nativeElement.clientWidth;
          this.cdref.detectChanges();
       })
  );
}

यहां एक काम करने वाला plunker ।

प्लंकर में मैंने एक counter जोड़ा जो जीवनशैली हुक ngDoCheck() का उपयोग करके प्रत्येक परिवर्तन पहचान चक्र को ngDoCheck() । आप देख सकते हैं कि इस विधि को नहीं कहा जा रहा है - प्रतिबिंबित घटनाओं पर काउंटर वैल्यू नहीं बदलता है।

detectChanges() इस घटक और उसके बच्चों पर परिवर्तन का पता चलाएगा। यदि आप रूट घटक से परिवर्तन पहचान को चलाएंगे (यानी, एक पूर्ण परिवर्तन पहचान जांच चलाएं) तो इसके बजाय ApplicationRef.tick() उपयोग करें (यह प्लंकर में टिप्पणी की गई है)। ध्यान दें कि tick() ngDoCheck() को कॉल करने का कारण बन जाएगा।

यह एक बड़ा सवाल है। मैंने अलग-अलग समाधानों की कोशिश करने में बहुत समय बिताया और मैंने बहुत कुछ सीखा। इस सवाल को पोस्ट करने के लिए धन्यवाद।