मुझे Angular 8 में @ViewChild के लिए नए स्थिर विकल्प का उपयोग कैसे करना चाहिए?

Question

मुझे नए कोणीय 8 दृश्य बच्चे को कैसे कॉन्फ़िगर करना चाहिए?

@ViewChild('searchText', {read: ElementRef, static: false})
public searchTextInput: ElementRef;

बनाम

@ViewChild('searchText', {read: ElementRef, static: true})
public searchTextInput: ElementRef;

कौनसा अच्छा है? मुझे static:trueबनाम का उपयोग कब करना चाहिए static:false?

Answer 1

ज्यादातर मामलों में आप उपयोग करना चाहेंगे {static: false}। इसे इस तरह सेट करने से क्वेरी मैच सुनिश्चित होंगे जो बाइंडिंग रिज़ॉल्यूशन (जैसे संरचनात्मक निर्देश *ngIf, etc...) पर निर्भर हैं ।

उपयोग करने के लिए उदाहरण static: false:

@Component({
  template: `
    <div *ngIf="showMe" #viewMe>Am I here?</div>
    <button (click)="showMe = !showMe"></button>
  ` 
})
export class ExampleComponent {
  @ViewChild('viewMe', { static: false })
  viewMe?: ElementRef<HTMLElement>; 

  showMe = false;
}

static: falseअधिक कोणीय 9. पढ़ें में डिफ़ॉल्ट फ़ॉलबैक व्यवहार होने जा रहा है यहाँ और यहाँ

{ static: true }विकल्प मक्खी पर एम्बेडेड दृश्य बनाने का समर्थन करने के पेश किया गया था। जब आप गतिशील रूप से एक दृश्य बना रहे हैं और एक्सीस करना चाहते हैं TemplateRef, तो आप ऐसा नहीं कर पाएंगे ngAfterViewInitक्योंकि यह एक ExpressionHasChangedAfterCheckedत्रुटि का कारण होगा । स्थिर ध्वज को सही पर सेट करने से आपका दृश्य ngOnInit में बन जाएगा।

फिर भी:

अधिकांश अन्य मामलों में, सबसे अच्छा अभ्यास का उपयोग करना है {static: false}।

इस बात से अवगत रहें कि { static: false }विकल्प को कोणीय 9. में डिफ़ॉल्ट बनाया जाएगा। इसका मतलब है कि स्टेटिक फ्लैग सेट करना अब आवश्यक नहीं है, जब तक कि आप static: trueविकल्प का उपयोग नहीं करना चाहते ।

आप ng updateअपने वर्तमान कोड आधार को स्वचालित रूप से अपग्रेड करने के लिए कोणीय क्ली कमांड का उपयोग कर सकते हैं ।

माइग्रेशन गाइड और इस बारे में अधिक जानकारी के लिए, आप यहां और यहां देख सकते हैं

स्थिर और गतिशील प्रश्नों के बीच अंतर क्या है?

@ViewChild () और @ContentChild () क्वेरी के लिए स्थिर विकल्प क्वेरी परिणाम उपलब्ध होने पर निर्धारित करता है।

स्थिर क्वेरी (स्थिर: सत्य) के साथ, दृश्य के बनने के बाद क्वेरी हल हो जाती है, लेकिन परिवर्तन का पता लगाने से पहले। परिणाम, हालांकि, आपके विचार में परिवर्तन को प्रतिबिंबित करने के लिए कभी भी अपडेट नहीं किया जाएगा, जैसे कि ngIf और ngFor ब्लॉक में परिवर्तन।

डायनामिक क्वेरी (स्थिर: असत्य) के साथ, क्वेरी क्रमशः @AViewChild () और @ContentChild () के लिए ngAfterViewInit () या ngAfterContentInit () के बाद हल होती है। परिणाम आपके दृश्य में परिवर्तन के लिए अपडेट किया जाएगा, जैसे कि ngIf और ngFor ब्लॉकों में परिवर्तन।

Comments

कृपया कोणीय डॉक्स (रिलीज़ के बाद बदले गए) के लिए लिंक को अद्यतन करें। angular.io/api/core/ViewChild#description

— सचिन गुप्ता

मैं चाइल्ड व्यू के उदाहरण का उपयोग करने में सक्षम नहीं हूं। यह हर समय अपरिभाषित कहता है।

— नेसन मनो

क्या आप कृपया कोणीय 9 में स्थिर विकल्प को हटाने की जानकारी के बारे में एक लिंक प्रदान कर सकते हैं?

— एलेक्स मारिनोव

@AlexMarinov मैंने अपने उत्तर को अधिक स्पष्ट करने के लिए अद्यतन किया है कि कोणीय 9 में क्या होने जा रहा है। इस बारे में लिंक माइग्रेशन गाइड में है

— Poul Kruijt

@ MinNgh componenta यदि आप घटक के टेम्पलेट के बाहर पूरे घटक को घोंसले में रखते हैं, तो आप उपयोग कर सकते हैं { static: true }, लेकिन अगर अंदर ViewChild तक पहुंचने के लिए कोई प्रत्यक्ष आवश्यकता नहीं है ngOnInit, तो आपको बस उपयोग करना चाहिए { static: false }।

— पौल क्रुजित

Answer 2

तो अंगूठे के एक नियम के रूप में आप निम्नलिखित के लिए जा सकते हैं:

• { static: true }जब आप उपयोग करना चाहते जरूरतों सेट होने के लिए ViewChildमें ngOnInit।

• { static: false }में ही पहुँचा जा सकता है ngAfterViewInit। यह वह भी है जब आप *ngIfअपने टेम्पलेट में अपने तत्व पर एक संरचनात्मक निर्देश (यानी ) के लिए जाना चाहते हैं ।

Comments

नोट: कोणीय 9 में, स्थिर ध्वज झूठे को परिभाषित करता है, इसलिए "किसी भी {स्थैतिक: झूठे} झंडे को सुरक्षित रूप से हटाया जा सकता है"। प्रलेखन: angular.io/guide/static-query-migration

— Stevethemacguy

Answer 3

कोणीय डॉक्स से

स्थैतिक - परिवर्तन का पता लगाने से पहले क्वेरी परिणामों को हल करना है या नहीं (यानी केवल स्थैतिक परिणाम लौटाएं)। यदि यह विकल्प प्रदान नहीं किया जाता है, तो कंपाइलर अपने डिफ़ॉल्ट व्यवहार पर वापस आ जाएगा, जो क्वेरी रिज़ॉल्यूशन के समय को निर्धारित करने के लिए क्वेरी परिणामों का उपयोग करना है। यदि कोई क्वेरी परिणाम एक नेस्टेड दृश्य (जैसे * एनजीआईएफ) के अंदर हैं, तो परिवर्तन का पता लगाने के बाद क्वेरी को हल किया जाएगा। अन्यथा, परिवर्तन खोज रन से पहले इसे हल किया जाएगा।

static:trueयदि बच्चा किसी भी स्थिति पर निर्भर नहीं करता है, तो इसका उपयोग करना बेहतर विचार हो सकता है । यदि तत्व की दृश्यता में परिवर्तन होता है, तो static:falseबेहतर परिणाम दे सकता है।

पुनश्च: इसकी नई विशेषता के बाद से, हमें प्रदर्शन के लिए बेंचमार्क चलाने की आवश्यकता हो सकती है।

संपादित करें

जैसा कि @Massimiliano Sartoretto द्वारा बताया गया है, github कमिट आपको अधिक जानकारी दे सकता है।

Comments

मैं इस सुविधा के पीछे आधिकारिक प्रेरणाओं को जोड़

— दूंगा

Answer 4

यहाँ आ गया क्योंकि एक ViewChild कोणीय 8 में अपग्रेड करने के बाद ngOnInit में अशक्त था।

स्थिर क्वेरी ngOnInit से पहले भरी जाती हैं, जबकि डायनेमिक क्वेरी (स्थिर: गलत) के बाद भरे जाते हैं। दूसरे शब्दों में, यदि कोई स्टैच्यू अब ngOnInit में शून्य है, तो स्टैटिक सेट करने के बाद: असत्य, आपको स्थैतिक में बदलने पर विचार करना चाहिए: true या फिर code को ngAfterViewInit पर ले जाएँ।

Https://github.com/angular/angular/blob/master/packages/core/src/view/view.ts#L332-L336 देखें

अन्य उत्तर सही हैं और समझाते हैं कि ऐसा क्यों होता है: संरचनात्मक निर्देशों पर निर्भर प्रश्न, जैसे कि एनजीआई के अंदर एक व्यूहिल्ड संदर्भ, इस निर्देश के सशर्त हल होने के बाद, अर्थात परिवर्तन का पता लगाने के बाद चलना चाहिए। हालाँकि, कोई भी सुरक्षित रूप से स्थैतिक का उपयोग कर सकता है: यह सच है और इस तरह गैर-संदर्भों के लिए ngOnInit से पहले प्रश्नों को हल करें। Imho इस विशेष मामले में एक अशक्त अपवाद के रूप में उल्लेख किया जाता है, संभवतः यह पहला तरीका हो सकता है जिससे आप इस विशिष्टता का सामना करेंगे, क्योंकि यह मेरे लिए था।

Answer 5

बच्चे को देखें @angular 5+ टोकन दो तर्क ('स्थानीय संदर्भ नाम', स्थैतिक: गलत | सच |

@ViewChild('nameInput', { static: false }) nameInputRef: ElementRef;

यह जानने के लिए कि यह सही है और गलत है

स्थैतिक - परिवर्तन का पता लगाने से पहले क्वेरी परिणामों को हल करना है या नहीं (यानी केवल स्थैतिक परिणाम लौटाएं)। यदि यह विकल्प प्रदान नहीं किया जाता है, तो कंपाइलर अपने डिफ़ॉल्ट व्यवहार पर वापस आ जाएगा, जो क्वेरी रिज़ॉल्यूशन के समय को निर्धारित करने के लिए क्वेरी परिणामों का उपयोग करना है। यदि कोई क्वेरी परिणाम एक नेस्टेड दृश्य (जैसे * एनजीआईएफ) के अंदर हैं, तो परिवर्तन का पता लगाने के बाद क्वेरी को हल किया जाएगा। अन्यथा, परिवर्तन खोज रन से पहले इसे हल किया जाएगा।

Answer 6

Ng8 में, आप मूल घटक में बच्चे के घटक को एक्सेस करने के लिए मैन्युअल रूप से सेट कर सकते हैं। जब आप स्थैतिक को सही पर सेट करते हैं, तो इसका मतलब है कि मूल घटक को केवल onInitहुक में घटक की परिभाषा मिलती है : जैसे:

 // You got a childComponent which has a ngIf/for tag
ngOnInit(){
  console.log(this.childComponent);
}

ngAfterViewInit(){
  console.log(this.childComponent);
}

यदि स्थैतिक गलत है, तो आप केवल ngAfterViewInit () में, ngOnInit () में, आपको अपरिभाषित मिलेगा।