Angular2 - क्या निजी चर को टेम्पलेट में पहुंच योग्य होना चाहिए?

Question

यदि एक privateघटक वर्ग पर एक चर घोषित किया जाता है , तो क्या मुझे इसे उस घटक के टेम्पलेट में एक्सेस करने में सक्षम होना चाहिए?

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>{{title}}</h2>
      <h2>Hello {{userName}}</h2> // I am getting this name
    </div>
  `,
})
export class App {
  public title = 'Angular 2';
  private userName = "Test Name"; //declared as private
}

Answer 1

नहीं, आपको अपने टेम्प्लेट में निजी चर का उपयोग नहीं करना चाहिए।

जबकि मुझे ड्रूमोर का उत्तर पसंद है और इसमें सही वैचारिक तर्क दिया गया है, कार्यान्वयन में गलत है। टेम्पलेट घटक वर्गों के भीतर मौजूद नहीं हैं, लेकिन उनके बाहर हैं। सबूत के लिए इस रेपो पर एक नज़र डालें ।

केवल यही कारण है कि यह काम करता है क्योंकि टाइपस्क्रिप्ट का privateकीवर्ड वास्तव में सदस्य को निजी नहीं बनाता है। जस्ट-इन-टाइम संकलन एक ब्राउज़र में रनटाइम पर होता है और जेएस के पास निजी सदस्यों (अभी तक?) की कोई अवधारणा नहीं है। मुझे सही रास्ते पर लाने का श्रेय सैंडर एलियास को जाता है ।

साथ ngcऔर आगे के- समय संकलन, आप त्रुटियों अगर आप टेम्पलेट से घटक के निजी सदस्यों तक पहुँचने की कोशिश मिलेगा। क्लोन प्रदर्शन रेपो, MyComponentसदस्यों की दृश्यता को निजी में बदलें और जब आप चल रहे हैं, तो आपको संकलन त्रुटियाँ मिलेंगी ngc। यहाँ भी अहेड-ऑफ-टाइम संकलन के लिए उत्तर विशिष्ट है।

Comments

यह सबसे अच्छी टिप्पणी है और imo को स्वीकृत उत्तर होना चाहिए। ऐसा नहीं है कि आप एक बार ट्रांसफ़ेक्ट करने के बाद निजी चर का उपयोग कर सकते हैं, जो आपको चाहिए .. कोड को साफ रखें!

— सैम व्लोबार्ग्स

यह केवल एक वैध उत्तर है! कोडलीज़र अब आपको चेतावनी देता है जब आप अपने टेम्पलेट में निजी संस्करण का उपयोग करते हैं।

— मैक्सिमे 1992

इसके साथ मेरी एकमात्र समस्या यह है कि आप वास्तविक सार्वजनिक रूप से उजागर सदस्यों जैसे @Inputs और Outputs के सदस्यों के बीच अंतर कैसे करते हैं, जिसे हम केवल अपने टेम्पलेट के लिए उजागर करना चाहते हैं और बाहरी दुनिया के लिए नहीं। यदि आप पुन: प्रयोज्य घटकों का निर्माण कर रहे हैं, जहाँ आप विधियाँ / सदस्य टेम्पलेट तक पहुँचना चाहते हैं, लेकिन अन्य घटकों के लिए नहीं। मुझे लगता है कि मूल उत्तर सही है। टेम्पलेट घटक का हिस्सा हैं।

— अश्ग

मैं @Ashg से सहमत हूं - और न केवल इनपुट और आउटपुट को राइट करें। जब मैं घटकों के बीच संवाद करना चाहता हूं, तो इसके बारे में , जैसे कि माता-पिता के घटक को उसके बच्चे में इंजेक्ट करके। बाल घटक तब सब कुछ देख सकता है जो माता-पिता अपने खाके के लिए उजागर कर रहे हैं, केवल उन तरीकों के बजाय जो माता-पिता बाहरी दुनिया के लिए उजागर करना चाहते हैं। कोणीय की बाधाओं के भीतर, यह उत्तर सही है, लेकिन मुझे नहीं लगता कि इस डिजाइन के माध्यम से अच्छी तरह से सोचा गया है।

— दान राजा

यह एक अच्छा जवाब है क्योंकि यह कोणीय के एओटी संकलन के भीतर की सीमाओं को संबोधित करता है और उनके आसपास कैसे पहुंचता है। हालांकि, IMO प्रश्न वैचारिक (जानबूझकर या नहीं) था। वैचारिक रूप से, टेम्पलेट कक्षा की परिभाषा का हिस्सा हैं। टेम्प्लेट विस्तारित नहीं होते हैं और न ही इनहेरिट क्लासेस और वे त्वरित रूप से त्वरित वस्तुओं तक नहीं पहुँचते हैं ... यह दूसरा तरीका है। टेम्पलेट्स को कक्षा के भीतर ही परिभाषित किया गया है, इसलिए, वैचारिक रूप से, वे कक्षा का हिस्सा हैं और वैचारिक रूप से निजी सदस्यों तक पहुंच होनी चाहिए।

— एक-दीदी

Answer 2

संपादित करें: यह उत्तर अब गलत है। जब मैंने इसे पोस्ट किया था, तो इस विषय पर कोई आधिकारिक मार्गदर्शन नहीं था, लेकिन जैसा कि @ यारोस्लाव (उत्कृष्ट, और सही) उत्तर में समझाया गया है, अब ऐसा नहीं है: कोडेलिज़र अब चेतावनी देता है और एओटी संकलन घटक टेम्प्लेट में निजी चर के संदर्भ में विफल हो जाएगा । उस ने कहा, एक वैचारिक स्तर पर यहां सब कुछ मान्य है, इसलिए मैं इस उत्तर को छोड़ दूंगा क्योंकि ऐसा लगता है कि यह मददगार रहा है।

---

हाँ, यह अपेक्षित है।

ध्यान रखें कि privateऔर अन्य एक्सेस संशोधक टाइपस्क्रिप्ट कंस्ट्रक्शन हैं, जबकि कंपोनेंट / कंट्रोलर / टेम्प्लेट कोणीय कंस्ट्रक्शन होते हैं, जिनके बारे में टाइपस्क्रिप्ट को पता होता है। एक्सेस मॉडिफ़ायर कक्षाओं के बीच दृश्यता को नियंत्रित करता है : फ़ील्ड बनाना अन्य वर्गों को इसके एक्सेस से privateरोकता है, लेकिन टेम्प्लेट और कंट्रोलर ऐसी चीजें हैं जो कक्षाओं में मौजूद हैं।

यह तकनीकी रूप से सच नहीं है, लेकिन (यह समझने के एवज में कि कक्षाएं डेकोरेटर्स और उनके मेटाडेटा से कैसे संबंधित हैं), यह इस तरह से सोचने में मददगार हो सकता है, क्योंकि महत्वपूर्ण बात (आईएमएचओ) टेम्पलेट और नियंत्रक के बारे में सोचने से अलग हटकर है घटक निर्माण के एकीकृत भागों के रूप में उनके बारे में सोच में - यह एनजी 2 मानसिक मॉडल के प्रमुख पहलुओं में से एक है।

इस तरह से सोचने पर, जाहिर है कि हम privateएक घटक वर्ग पर चर को उसके टेम्पलेट में दिखाई देने की उम्मीद करते हैं, उसी कारण से हम उनसे privateउस वर्ग के तरीकों में दिखाई देने की अपेक्षा करते हैं ।

Comments

पहले, मैंने सोचा कि जैसे आप आकर्षित करते हैं। लेकिन मैंने tslint को 4.02 और कोडलीज़र को 2.0.0-Beta.1 में अपग्रेड किया और मेरे पास यह कहने में त्रुटियां थीं कि मैं चर का उपयोग करते समय निजी उपयोग नहीं कर सकता। इसलिए @ यारोस्लाव का उत्तर अधिक उपयुक्त लगता है।

— मैक्सिमे 1992

मैं मानता हूं कि यह एक घटक मॉडल के लिए इसका निजी संस्करण नहीं देख पाने के लिए समझ में नहीं आता है, उन्हें संभवतः संकलन के दौरान एक ही वर्ग में मैश किया जाना चाहिए, मेरा मतलब है, आपको घटक विशिष्ट लक्षणों, वस्तुओं और कार्यों को उजागर करना होगा अन्य सभी घटक ताकि आप अपने टेम्पलेट में उन लोगों का उपयोग कर सकें, जो बाहरी ट्वीक्स या कॉल का उल्लेख नहीं करते हैं जो तैयार घटक पर संभावित अप्रत्याशित व्यवहार का कारण बन सकते हैं

— Felype

@ ड्रूमोर, हैलो, मैं केवल कुछ महीनों के लिए कोणीय कोडिंग कर रहा हूं। मैं इस मुद्दे से मुखातिब था। क्या इस पर कोई और बहस है? जैसा कि मुझे लगता है कि पैटर्न का पालन करने के लिए कुछ भी विशिष्ट नहीं है। imo, जैसा कि यह है कि यह क्या है, यह कोड पृथक्करण का उल्लंघन करता है।

— एडगर

@ ड्राउमोर, मुझे कहना होगा कि मैं आपके एंकर तर्क से पूरी तरह सहमत हूं। और मुझे डर है कि कोणीय टीम थोड़ा गड़बड़ कर दी है। एओटी मोड में, वे निजी सदस्यों को अनुमति नहीं दे रहे हैं, जबकि डॉक्स पर वे अन्यथा दावा करते हैं, जो निजी सदस्यों के मामले में आपकी बात को पूरी तरह से मजबूत कर रहा है और केवल इस विषय में और अधिक अराजकता जोड़ रहा है। डॉक्स से: "कोणीय एक घटक के टेम्पलेट को घटक के रूप में मानता है। घटक और उसका टेम्पलेट एक दूसरे पर अंतर्निहित रूप से भरोसा करते हैं। इसलिए, घटक का स्वयं का टेम्पलेट उस घटक के किसी भी गुण से बंध सकता है, जिसके साथ या उसके बिना * @ * इनपुट इंस्ट्रूमेंट है। "

— २२:०२ पर Orel Eraki

@drewmoore, डॉक्स के लिए लिंक: angular.io/guide/attribute-directives#appendix-why-add-input (मुझे पता है कि यह मुख्य रूप से इनपुट डेकोरेटर पर ध्यान केंद्रित है, लेकिन वे जो बात कर रहे हैं उसका बहुत कुछ सिर्फ संबंधित नहीं हैं। यह)

— २२:०२ पर ओरेल डेरा '’

Answer 3

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

में डार्ट टेम्पलेट निजी चर संदर्भ नहीं दे सकता घटक वर्ग की है, क्योंकि डार्ट टाइपप्रति के विपरीत प्रभावी रूप से बाहर से निजी सदस्यों की पहुँच से बचाता है।

मैं अभी भी @drewmoores को घटक के बारे में सोचने का सुझाव देता हूं और हालांकि यह एक इकाई के रूप में टेम्पलेट है।

अद्यतन (टीएस) ऐसा लगता है कि निजी संपत्तियों के लिए ऑफ़लाइन संकलन का उपयोग Angular2 TS में अधिक सीमित हो जाएगा और साथ ही https://github.com/angular/angular/issues/11422

Comments

क्या निजी चर को देखने के लिए सुलभ होने के लिए टाइपस्क्रिप्ट कंपाइलर होना संभव है?

— मैथ्यू हरवुड

मुझे नहीं पता। मुझे नहीं लगता।

— गुंटर ज़ोचबॉयर

मुझे लगता है कि उनका निजी होना इस बात को प्रभावित कर सकता है कि घटक कितना सही है? उदाहरण के लिए, यदि मैं किसी परीक्षण के संदर्भ में एक घटक बनाता हूं, तो मैं खाका / वर्ग सहभागिता की पुष्टि करने के लिए अपने परीक्षण से उन निजी तरीकों को कॉल करने में सक्षम नहीं हो पाऊंगा। मैंने अभी तक यह कोशिश नहीं की है, इसलिए मुझे माफ कर दो अगर यह स्पष्ट है :)

— सैम कैलोरी

डार्ट में आप परीक्षणों में निजी सदस्यों तक नहीं पहुँच सकते। इस बात की बहुत चर्चा है (भाषा से स्वतंत्र) कि क्या इसका समर्थन किया जाना चाहिए और क्या निजी एपीआई का परीक्षण किया जाना चाहिए। सार्वजनिक एपीआई का परीक्षण प्रत्येक कोड पथ तक पहुंचने में सक्षम होना चाहिए। मुझे लगता है कि यह सामान्य रूप से उचित है। डार्ट में निजी प्रति पुस्तकालय (जिसमें कई फाइलें शामिल हो सकती हैं) जो सार्वजनिक एपीआई को काफी व्यापक बनाता है - यूनिट परीक्षण के लिए आईएमएचओ बहुत व्यापक है।

— गुंटर ज़ोचाउर

Answer 4

निजी चर घटक के टेम्पलेट के भीतर उपयोग किया जा सकता है। गाइड के लिए कोणीय 2 चीट-शीट देखें: https://angular.io/docs/ts/latest/cookbook/component-communication.html# ! #parent-to-child-setter

टाइपस्क्रिप्ट में कक्षाओं के सार्वजनिक / निजी सदस्यों पर अधिक विस्तृत विवरण यहां पाया जा सकता है: https://www.typescriptlang.org/docs/handbook/classes.html ।

डिफ़ॉल्ट रूप से सभी सदस्य सार्वजनिक हैं। सार्वजनिक सदस्यों को घटक वर्ग के बाहर से वर्ग-उदाहरण के साथ पहुँचा जा सकता है। लेकिन निजी सदस्यों को केवल कक्षा सदस्य कार्यों के भीतर ही एक्सेस किया जा सकता है।

Comments

मैंने पहले लिंक ( angular.io/guide/component-interaction###entent-to-child-setter ) को देखा और मुझे कहीं भी ऐसा नहीं लगता कि यह सुझाव दिया जाए कि टेम्प्लेट में निजी चर का उपयोग करना ठीक है। विपरीत करने के लिए, वे टेम्पलेट से निजी चर का उपयोग करने के लिए गेटर्स और सेटर का उपयोग करते हैं।

— सेबेस्टियन चार्टियर

Answer 5

एक वैकल्पिक तरीका ts फ़ाइल में निजी चर का उपयोग करना और गेटर्स का उपयोग करना हो सकता है।

private _userName = "Test Name";
get userName() {
  return this._userName;
}

यह एक अच्छा तरीका है क्योंकि ts फ़ाइल और HTML स्वतंत्र रहती है। यदि आप ts फ़ाइल में _userName चर नाम बदलते हैं, तो भी आपको टेम्पलेट फ़ाइल में कोई परिवर्तन नहीं करना पड़ेगा।

Comments

मुझे लगता है कि अगर आप _userName को _clientName में बदलते हैं, उदाहरण के लिए, स्थिरता के लिए, आपको क्लाइंटनेम प्राप्त करने के लिए गेटटर बदलना होगा ... इसलिए कोई जीत नहीं है

— LeagueOfJava

निजी चर के लिए उपयोगकर्ता को अंडरस्कोर करना एक बुरा अभ्यास है।

— फ्लोरिअन लेटिगेब

@FlorianLeitgeb कौन सा आधिकारिक कोणीय डॉक्स ऐसा क्यों करता है ? private _name = '';

— रफिन

तब इस कोड स्निपेट की ठीक से समीक्षा नहीं की गई थी। वे एक शैली सम्मेलन का पालन करते हैं, जिसे यहां शैली गाइड में घोषित किया गया है । और यहां उनके पृष्ठ पर टाइपस्क्रिप्ट क्लासेस अनुभाग में भी अंडरस्कोर का उपयोग नहीं किया गया है।

— फ्लोरियन लेटेजब

@FlorianLeitgeb रफ़िन द्वारा पोस्ट किए गए लिंक में दिखाए गए अनुसार सेटर विधियों के अवरोधन का प्रस्तावित समाधान क्या होगा? यानी आप अपने सेटर के निजी बैकिंग क्षेत्र को क्या कहते हैं?

— एल रोन्ननो

Answer 6

संक्षिप्त उत्तर यह है कि आप निजी सदस्यों को टेम्पलेट से एक्सेस करने में सक्षम नहीं होना चाहिए क्योंकि यह तकनीकी रूप से टीएस फ़ाइल से अलग है।

Answer 7

Tsconfig.app.json में यदि आप कंपाइलर विकल्पों में 'fullTemplateTypeCheck' विकल्प प्रदान करते हैं, तो आप प्रोजेक्ट बिल्ड के समय अपने प्रोजेक्ट की HTML फ़ाइलों में सभी अमान्य संदर्भ देख सकते हैं।

"angularCompilerOptions": {
"enableIvy": true,
"fullTemplateTypeCheck": true

}