@HostBinding और @HostListener: वे क्या करते हैं और वे किस लिए हैं?

Question

वर्ल्ड वाइड interweb चारों ओर मेरी meanderings, और अब विशेष रूप से में angular.io शैली डॉक्स , मैं कई संदर्भों को खोजने @HostBindingऔर @HostListener। ऐसा लगता है कि वे काफी मौलिक हैं, लेकिन दुर्भाग्य से इस समय उनके लिए प्रलेखन थोड़ा स्केच है।

क्या कोई कृपया बता सकता है कि वे क्या हैं, वे कैसे काम करते हैं और उनके उपयोग का उदाहरण देते हैं?

Answer 1

क्या आपने इन आधिकारिक डॉक्स की जाँच की है?

HostListener - एक मेजबान श्रोता की घोषणा करता है। जब कोणीय तत्व निर्दिष्ट घटना का उत्सर्जन करता है, तो कोणीय सुशोभित विधि को लागू करेगा।

@HostListener- मेजबान तत्व द्वारा उत्सर्जित घटना को सुनेंगे, जिसके साथ घोषित किया गया है @HostListener।

HostBinding - एक मेजबान संपत्ति बाध्यकारी घोषित करता है। परिवर्तन का पता लगाने के दौरान कोणीय स्वचालित रूप से होस्ट प्रॉपर्टी बाइंडिंग की जाँच करता है। यदि कोई बाइंडिंग बदलता है, तो यह निर्देश के होस्ट तत्व को अद्यतन करेगा।

@HostBinding- मेजबान तत्व को संपत्ति बाँध देगा, यदि कोई बाध्यकारी परिवर्तन करता है, HostBindingतो मेजबान तत्व को अद्यतन करेगा।

---

नोट: हाल ही में दोनों लिंक हटा दिए गए हैं। स्टाइल गाइड के " HostBinding-HostListening " भाग लिंक लौटने तक एक उपयोगी विकल्प हो सकता है।

---

चित्र का अर्थ करने के लिए यहां एक सरल कोड उदाहरण दिया गया है:

डेमो: यहाँ डेमो लाइव प्लंकर में है - "@HostListener & @Hostinding के बारे में एक सरल उदाहरण"

• यह उदाहरण मेजबान के तत्व के roleसाथ घोषित - एक संपत्ति को बांधता है@HostBinding
  • याद रखें कि roleएक विशेषता है, क्योंकि हम उपयोग कर रहे हैं attr.role।
  • <p myDir><p mydir="" role="admin">जब आप इसे डेवलपर टूल में देखते हैं तो यह बन जाता है ।
• यह तब घटक के होस्ट तत्व के साथ, प्रत्येक क्लिक के साथ बदलते हुए onClickघोषित की गई घटना को सुनता है । @HostListenerrole
  • जब <p myDir>क्लिक किया जाता है तो परिवर्तन यह होता है कि इसके उद्घाटन टैग से और पीछे से परिवर्तन होता <p mydir="" role="admin">है <p mydir="" role="guest">।

directives.ts

import {Component,HostListener,Directive,HostBinding,Input} from '@angular/core';

@Directive({selector: '[myDir]'})
export class HostDirective {
  @HostBinding('attr.role') role = 'admin'; 
  @HostListener('click') onClick() {
    this.role= this.role === 'admin' ? 'guest' : 'admin';
  }
}

AppComponent.ts

import { Component,ElementRef,ViewChild } from '@angular/core';
import {HostDirective} from './directives';

@Component({
selector: 'my-app',
template:
  `
  <p myDir>Host Element 
    <br><br>

    We have a (HostListener) listening to this host's <b>click event</b> declared with @HostListener

    <br><br>

    And we have a (HostBinding) binding <b>the role property</b> to host element declared with @HostBinding 
    and checking host's property binding updates.

    If any property change is found I will update it.
  </p>

  <div>View this change in the DOM of the host element by opening developer tools,
    clicking the host element in the UI. 

    The role attribute's changes will be visible in the DOM.</div> 
    `,
  directives: [HostDirective]
})
export class AppComponent {}

Comments

क्या यह डेकोरेटर अभी भी उपयोग किया जाता है ऐसा लगता है कि लिंक को कोणीय 2 प्रलेखन से हटा दिया गया है

— CommonSenseCode

हां, यह अभी भी उपयोग में है लेकिन मुझे एक बार इसकी पुष्टि करने दें। अगर मैं कुछ और समझ सकता हूं, तो मैं आपको अपडेट करूंगा।

— अक्टूबर को micronyks

वे चीट शीट पर हैं: angular.io/docs/ts/latest/guide/cheatsheet.html

— Targaryen

@ Mr.EasyAnswersMcFly नोट और लिंक के साथ अद्यतन उत्तर। कृपया ध्यान दें कि अभी भी उचित दस्तावेज उपलब्ध नहीं है।

— माइक्रोनिक्क्स

@MuhammadSaleh ने यह कहने के लिए अपनी मेहनत को स्क्रॉल किया कि यह कैसे गणना और गणना करता है ... लेकिन यह सुनिश्चित करने के लिए है कि प्रत्येक उदाहरण के लिए एक अलग श्रोता होगा

— micronyks

Answer 2

एक त्वरित टिप जो मुझे याद रखने में मदद करती है कि वे क्या करते हैं -

HostBinding('value') myValue; बिल्कुल वैसा ही है [value]="myValue"

तथा

HostListener('click') myClick(){ } बिल्कुल वैसा ही है (click)="myClick()"

---

HostBindingऔर HostListenerनिर्देशों और अन्य लोगों में लिखे गए हैं (...)और [..]उन्हें टेम्प्लेट (घटकों के) के अंदर लिखा गया है।

Comments

आह, यह इस जवाब के लिए धन्यवाद के साथ मेरे (उद्देश्य के अनुसार) क्लिक किया गया। @HostListenerजाने के लिए रास्ता है जब आप विशिष्ट घटना बाध्यकारी के लिए डोम पर कुछ भी नहीं है, जैसे कि मेरे मामले में कीबोर्ड इनपुट।

— MrBoJangles

Answer 3

यहाँ एक मूल होवर उदाहरण है।

घटक की टेम्पलेट संपत्ति:

खाका

<!-- attention, we have the c_highlight class -->
<!-- c_highlight is the selector property value of the directive -->

<p class="c_highlight">
    Some text.
</p>

और हमारा निर्देशन

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

@Directive({
    // this directive will work only if the DOM el has the c_highlight class
    selector: '.c_highlight'
 })
export class HostDirective {

  // we could pass lots of thing to the HostBinding function. 
  // like class.valid or attr.required etc.

  @HostBinding('style.backgroundColor') c_colorrr = "red"; 

  @HostListener('mouseenter') c_onEnterrr() {
   this.c_colorrr= "blue" ;
  }

  @HostListener('mouseleave') c_onLeaveee() {
   this.c_colorrr = "yellow" ;
  } 
}

Comments

मैं इस स्वीकृत उत्तर को पूछे गए प्रश्न के उत्तर के रूप में नहीं देखता। क्या आप कुछ स्पष्टीकरण देना चाहेंगे? जैसे कि c_colorrr, c_onEnterrr (), c_onLeaveeee इस विशेष कोड स्निपेट में क्या करते हैं?

— luqo33

मुझे लगता है कि इसे माउस में रंग बदलने की घटना को नीले रंग में बदलना चाहिए और माउस की छुट्टी को पीले पर।

— मिचेल जाइब्रो

आप मार्कअप में निर्देश कहां रखते हैं? लगता है कि आप इसे बॉडी टैग पर रखेंगे, लेकिन यह रूट कंपोनेंट से बाहर होगा। यदि आप इस उत्तर से भ्रमित हैं तो यह लिंक ng2.codecraft.tv/custom-directives/hostlistener-and-hostbinding

— mtpultz

@mtpultz यह कक्षा में है।

— सेरकन

Answer 4

इसके बारे @HostBindingमें एक और अच्छी बात यह है कि आप इसे संयोजित कर सकते हैं @Inputयदि आपका बंधन सीधे इनपुट पर निर्भर करता है, जैसे:

@HostBinding('class.fixed-thing')
@Input()
fixed: boolean;

Comments

क्या आप कृपया उपयोग के साथ उदाहरण साझा कर सकते हैं @Input()?

— मनो

उदाहरण मेरे उत्तर में सही है, आप बस दोनों सज्जाकारों को एक के बाद एक लिखते हैं, आदेश अप्रासंगिक होना चाहिए

— अल्टशूलर

मुझे लगता है कि मैं जो याद कर रहा हूं वह यह है कि यह कैसे उपयोग से अलग है @HostBinding। आपको कब उपयोग करने की आवश्यकता है @Input?

— १२५२ 1४

Answer 5

इस विषय में भ्रम पैदा करने वाली एक बात यह है कि डेकोरेटर्स का विचार बहुत स्पष्ट नहीं है, और जब हम कुछ ऐसा मानते हैं ...

@HostBinding('attr.something') 
get something() { 
    return this.somethingElse; 
 }

यह काम करता है, क्योंकि यह एक getसहायक है । आप किसी फ़ंक्शन का उपयोग नहीं कर सकते हैं:

@HostBinding('attr.something') 
something() { 
    return this.somethingElse; 
 }

अन्यथा, इसका उपयोग करने @HostBindingका लाभ यह है कि बाउंड वैल्यू में बदलाव होने पर परिवर्तन का पता लगाया जाता है।

Answer 6

सारांश:

• @HostBinding: यह डेकोरेटर एक क्लास प्रॉपर्टी को होस्ट एलिमेंट की प्रॉपर्टी से बांधता है ।
• @HostListener: यह डेकोरेटर मेजबान तत्व की एक घटना के लिए एक वर्ग विधि बांधता है ।

उदाहरण:

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

@Component({
  selector: 'app-root',
  template: `<p>This is nice text<p>`,
})
export class AppComponent  {

  @HostBinding('style.color') color; 

  @HostListener('click')
  onclick() {
    this.color =  'blue';
  }

}

उपरोक्त उदाहरण में निम्नलिखित होता है:

• एक ईवेंट श्रोता को क्लिक ईवेंट में जोड़ा जाता है जो घटक के भीतर कहीं भी एक क्लिक ईवेंट होने पर निकाल दिया जाएगा
• colorहमारे में संपत्ति AppComponentवर्ग के लिए बाध्य है style.colorघटक पर संपत्ति। इसलिए जब भी colorसंपत्ति अपडेट होगी तोstyle.color हमारे घटक संपत्ति
• इसका परिणाम यह होगा कि जब भी कोई घटक पर क्लिक करेगा तो रंग अपडेट हो जाएगा।

में उपयोग @Directive:

हालांकि यह घटक पर इस्तेमाल किया जा सकता है इन सज्जाकारों को अक्सर एक विशेषता निर्देशों में उपयोग किया जाता है। जब @Directiveमेजबान में उपयोग किया जाता है तो वह तत्व बदल जाता है जिस पर निर्देश रखा जाता है। उदाहरण के लिए इस घटक टेम्पलेट पर एक नज़र डालें:

<p p_Dir>some paragraph</p>

यहाँ p_Dir <p>तत्व पर एक निर्देश है । जब @HostBindingया @HostListenerनिर्देशन वर्ग के भीतर उपयोग किया जाता है तो मेजबान अब संदर्भित करेगा <p>।

Answer 7

कम जारगों के साथ सिद्धांत

@Hostlistnening मूल रूप से होस्ट तत्व का कहना है (एक बटन) एक उपयोगकर्ता द्वारा एक कार्रवाई को सुन रहा है और एक निश्चित फ़ंक्शन का प्रदर्शन चेतावनी ("अहोय!") कहता है, जबकि @Hostbinding दूसरा रास्ता गोल है। यहां हम उस बटन पर होने वाले परिवर्तनों को आंतरिक रूप से सुनते हैं (जब यह क्लिक किया गया कि कक्षा के साथ क्या हुआ है) और हम उस परिवर्तन का उपयोग कुछ और करने के लिए करते हैं, कहते हैं कि एक विशेष रंग का उत्सर्जन करें।

उदाहरण

उस परिदृश्य के बारे में सोचें, जिसे आप किसी घटक पर एक पसंदीदा आइकन बनाना चाहते हैं, अब आप जानते हैं कि आपको यह जानना होगा कि क्या आइटम अपनी कक्षा के साथ पसंदीदा हो गया है, हमें इसे निर्धारित करने का एक तरीका चाहिए। यह ठीक उसी जगह है जहाँ @Hostbinding अंदर आता है।

और जहां यह जानने की आवश्यकता है कि वास्तव में उस उपयोगकर्ता द्वारा क्या कार्रवाई की गई है, जहां @Hostlistening आता है

Comments

यह भ्रामक है, और सज्जाकार के नाम गलत हैं।

— मटमैनी 16