टेम्प्लेट में कोणीय 2 हैशटैग का क्या अर्थ है?

Question

मैं कोणीय 2 के साथ काम कर रहा हूं और मुझे कुछ ऐसा मिला है

<input #searchBox (keyup)="search(searchBox.value)"

और यह काम करता है।

हालाँकि, मैं #searchBox का अर्थ नहीं समझता । मुझे डॉक में कुछ भी स्पष्ट नहीं मिला है।

क्या कोई मुझे समझा सकता है कि यह कैसे काम करता है?

Comments

के संभावित डुप्लिकेट क्या कोष्ठक, कोष्ठक और Angular2 में तारक के बीच का अंतर है? - " एक DOM तत्व पर <div #mydiv> तत्व का एक संदर्भ "। दूसरे शब्दों में, #searchBoxतत्व पर होने से आप searchBox.valueकीप हैंडलर में उपयोग कर सकते हैं ।

— जो क्ले

यह एक चर है।

— हैरी

Answer 1

यह Angular 2 टेम्प्लेटिंग सिस्टम में उपयोग किया जाने वाला वाक्यविन्यास है जो DOM तत्वों को चर के रूप में घोषित करता है।

यहाँ मैं अपने घटक को एक टेम्पलेट URL देता हूँ:

import {Component} from 'angular2/core';

@Component({
   selector: 'harrys-app',
   templateUrl: 'components/harry/helloworld.component.html'
})

export class HarrysApp {}

टेम्पलेट HTML रेंडर करते हैं। एक टेम्पलेट में आप डेटा, प्रॉपर्टी बाइंडिंग और ईवेंट बाइंडिंग का उपयोग कर सकते हैं। यह निम्नलिखित सिंटैक्स के साथ पूरा किया जाता है:

# - चर घोषणा

() - इवेंट बाइंडिंग

[] - संपत्ति बंधन

[()] - दो-तरफा संपत्ति बाध्यकारी

{{ }} - प्रक्षेप

* - संरचनात्मक निर्देश

#वाक्य रचना स्थानीय चर नाम जो संदर्भ देता डोम एक टेम्पलेट में वस्तुओं घोषणा कर सकते हैं। जैसे

 <span [hidden]="harry.value">*</span>
 <input type="text" #harry>
 {{ harry.value }}

Comments

कार्य उदाहरण <input #bla style="display: none;" value="Foo" /<div> {{bla.value}} </div>:। फू में प्रदर्शित किया जाता है।

— ब्रॉडबैंड

और उस परिवर्तनशील घोषणा के लिए स्वयं एक चर होने का कोई रास्ता नहीं है? मैं मेनू के एक जटिल नेस्टेड ऑब्जेक्ट से सामग्री मेनू आइटम बनाने की कोशिश कर रहा हूं और इसने मुझे स्तब्ध कर दिया है। मैं गतिशील रूप से डोम चर बनाने के लिए प्रतीत नहीं कर सकते। क्या उन्हें वास्तव में डोम में हार्ड-कोडेड होने की आवश्यकता है?

— क्राउनमैग्नम

आधिकारिक दस्तावेज़ संदर्भ: angular.io/guide/…

— 郷

Answer 2

जब आप यह # खोज बॉक्स सेट करते हैं, तो आप इस इनपुट को अपनी टाइपस्क्रिप्ट पर प्राप्त कर सकते हैं

    @ViewChild('searchBox') searchBox;
    console.info(searchBox.nativeElement.value)

संपादित करें

कुछ उदाहरण जोड़ना: https://plnkr.co/edit/w2FVfKlWP72pzXIsfsCU?p=preview

Answer 3

से angulartraining.com :

टेम्प्लेट रेफरेंस वैरिएबल एक छोटा रत्न होता है जो कोणीय के साथ बहुत सारी अच्छी चीजें प्राप्त करने की अनुमति देता है। मैं आमतौर पर उस सुविधा को "हैशटैग सिंटैक्स" कहता हूं, क्योंकि, यह एक टेम्पलेट में एक तत्व का संदर्भ बनाने के लिए एक साधारण हैशटैग पर निर्भर करता है:

<input #phone placeholder="phone number">

उपरोक्त सिंटैक्स जो करता है वह काफी सरल है: यह इनपुट तत्व का एक संदर्भ बनाता है  जिसे बाद में मेरे टेम्पलेट में उपयोग किया जा सकता है। ध्यान दें कि इस चर के लिए गुंजाइश संपूर्ण HTML टेम्पलेट है जिसमें संदर्भ को परिभाषित किया गया है।

उदाहरण के लिए, इनपुट के मूल्य को प्राप्त करने के लिए मैं उस संदर्भ का उपयोग कैसे कर सकता हूं:

<!-- phone refers to the input element --> 
<button (click)="callPhone(phone.value)">Call</button>

ध्यान दें कि  फोन इनपुट के लिए HTMLElement ऑब्जेक्ट उदाहरण   को संदर्भित करता है  । नतीजतन,  फोन  में किसी भी HTMLElement (आईडी, नाम, इनरएचटीएमएल, मूल्य, आदि) के सभी गुण और तरीके हैं।

उपरोक्त सरल तरीके से एनकोमॉडल या किसी अन्य प्रकार के डेटा बाइंडिंग का उपयोग करने से बचने का एक अच्छा तरीका है जिसे सत्यापन के संदर्भ में बहुत अधिक आवश्यकता नहीं है।

---

क्या यह भी घटकों के साथ काम करता है?

इसका जवाब है हाँ!

... इसका सबसे अच्छा हिस्सा यह है कि हम वास्तविक घटक उदाहरण के लिए एक संदर्भ प्राप्त कर रहे हैं, HelloWorldComponent, इसलिए हम उस घटक के किसी भी तरीके या गुणों का उपयोग कर सकते हैं (भले ही उन्हें निजी या संरक्षित घोषित किया गया हो, जो आश्चर्य की बात है) :

@Component({
  selector: 'app-hello',
  // ...

export class HelloComponent {
   name = 'Angular';
}

[...]

<app-hello #helloComp></app-hello>

<!-- The following expression displays "Angular" -->
{{helloComp.name}}

Comments

"भले ही वे निजी या संरक्षित घोषित किए गए हों, जो आश्चर्य की बात है" - ध्यान रखें कि एक्सेस स्पेसर्स एक संकलन समय रक्षक हैं, और आमतौर पर कोड संकलित और चलने के बाद कुछ भी नहीं करते हैं।

— टोंगफा

Answer 4

यह एक टेम्प्लेट चर बनाता है जो संदर्भ देता है

• inputतत्व अगर तत्व एक सादे डोम तत्व है
• घटक या निर्देश उदाहरण अगर यह एक घटक या निर्देश के साथ एक तत्व है
• कुछ विशिष्ट घटक या निर्देश यदि इसका उपयोग किया जाता है जैसे कि #foo="bar"कब barहै

@Directive({ // or @Component
  ...
  exportAs: 'bar'
})

इस तरह के एक टेम्प्लेट चर को टेम्पलेट बाइंडिंग या तत्व प्रश्नों में संदर्भित किया जा सकता है

@ViewChild('searchBox') searchBox:HTMLInputElement;

Comments

ये अद्भुत है। वैसे - यह ngModel के समान है, है ना?

— तरह के उपयोगकर्ता

ज़रुरी नहीं। ngModelफार्म एकीकरण के लिए है। आप बिना अन्य सभी प्रकार के बाइंडिंग कर सकते हैं ngModel।

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

आखिरी बात, आपने ngAfterViewInitवास्तव में इसे आयात किए बिना कैसे उपयोग किया? और कार्यान्वित कर रहे हैं? यह प्लंकर पर फीचर में बिल्ड है?

— तरह के उपयोगकर्ता

नहीं, कोणीय जीवनचक्र इंटरफेस पर निर्भर नहीं किया जाता है, इसे स्पष्ट रूप से घोषित किया जाता है। यदि विधि मौजूद है तो इसे कहा जाता है। इंटरफेस को लागू करना, हालांकि अच्छा अभ्यास है।

— गुंटर Zöchbauer