@ হোস্টবাইন্ডিং এবং @ হোস্টলিস্টনার: তারা কী করে এবং তারা কীসের জন্য?

188

আমার বিশ্বজুড়ে আন্তঃস্বাদ এবং এখন বিশেষত কৌণিক.ওর স্টাইল ডক্সে আমার বিভ্রান্তিতে আমি @HostBindingএবং এর অনেকগুলি উল্লেখ পাই @HostListener। দেখে মনে হচ্ছে এগুলি বেশ মৌলিক, তবে দুর্ভাগ্যক্রমে তাদের জন্য এই মুহুর্তে ডকুমেন্টেশনগুলি কিছুটা স্কেচিযুক্ত।

তারা দয়া করে কীভাবে ব্যাখ্যা করতে পারেন, তারা কীভাবে কাজ করে এবং তাদের ব্যবহারের উদাহরণ দেয়?

angular angular-services

— serlingpa
সূত্র

139

আপনি এই অফিসিয়াল ডক্স পরীক্ষা করেছেন?

হোস্টলিস্টনার - একটি হোস্ট শ্রোতা ঘোষণা করে। হোস্ট উপাদান যখন নির্দিষ্ট ইভেন্টটি নির্গত করে তখন কৌণিক সজ্জিত পদ্ধতিতে ডাকে।

@HostListener- হোস্ট উপাদান দ্বারা নির্ধারিত ইভেন্টটি শোনাবে যা ঘোষণা করা হয়েছে @HostListener।

হোস্টবাইন্ডিং - হোস্ট প্রপার্টি বাইন্ডিং ঘোষণা করে। কৌণিক পরিবর্তন সনাক্তকরণের সময় স্বয়ংক্রিয়ভাবে হোস্ট সম্পত্তি সম্পর্কিত বাইন্ডিংগুলি পরীক্ষা করে। যদি কোনও বাঁধাই পরিবর্তন হয় তবে এটি নির্দেশের হোস্ট উপাদানটি আপডেট করবে।

@HostBinding- হোস্ট উপাদানটির সাথে সম্পত্তি আবদ্ধ করবে, যদি একটি বাধ্যবাধকতা পরিবর্তন হয় HostBindingতবে হোস্ট উপাদানটি আপডেট করবে।

দ্রষ্টব্য: উভয় লিঙ্কই সম্প্রতি সরিয়ে ফেলা হয়েছে। লিঙ্কগুলি ফিরে না আসা পর্যন্ত স্টাইল গাইডের " হোস্টবাইন্ডিং-হোস্টলিস্টিং " অংশটি কার্যকর বিকল্প হতে পারে।

এর অর্থ কী তা চিত্রিত করতে এখানে একটি সাধারণ কোড উদাহরণ রয়েছে:

ডেমো: প্লামকারে এখানে ডেমো লাইভ রয়েছে - "@ হোস্টলিস্টনার এবং @ হোস্টবাইন্ডিং সম্পর্কে একটি সাধারণ উদাহরণ"

এই উদাহরণটি কোনও roleসম্পত্তি - @HostBindingহোস্টের উপাদানটির সাথে ঘোষিত - বেঁধে দেয়
- পুনরাহ্বান যে roleএকটি বৈশিষ্ট্য হল, আমরা ব্যবহার করছি, যেহেতু attr.role।
- আপনি যখন এটি বিকাশকারী সরঞ্জামগুলিতে দেখেন তখন হয়ে যায় ।
এরপরে প্রতিটি ক্লিকের সাথে পরিবর্তিত হয়ে উপাদানটির হোস্ট উপাদানটির সাথে সংযুক্ত, onClickঘোষিত ইভেন্টটি শোনে @HostListenersrole
- পরিবর্তন যখন ক্লিক করা হয় যে তার উদ্বোধনী ট্যাগ থেকে পরিবর্তন হয় থেকে এবং ফিরে।

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 {}

— micronyks
সূত্র

1

এই প্রসাধক এখনও ব্যবহার মনে হয় সংযোগগুলি angular2 ডকুমেন্টেশন থেকে সরিয়ে দেওয়া হয়েছে হয়

— CommonSenseCode

1

হ্যাঁ, এটি এখনও ব্যবহারের মধ্যে রয়েছে তবে আমাকে একবার এটি নিশ্চিত করতে দিন। আমি আপনাকে আপডেট করব, যদি আমি অন্য কিছু বের করতে পারি।

— মাইক্রোনিকস

তারা ঠকাই শীট উপর আছেন: angular.io/docs/ts/latest/guide/cheatsheet.html

— Targaryen

1

@ মিঃএসিএএনসওয়ার্স এমসিফাই উত্তর এবং লিঙ্ক সহ আপডেট হয়েছে। দয়া করে নোট করুন এখনও সঠিক ডকুমেন্টেশন উপলব্ধ নেই।

— মাইক্রোনিকস

1

@ মুহম্মদসালেহ যেহেতু এটি গণনা এবং গণনা করে তা শক্তভাবে স্ক্রোল করার জন্য ... তবে এটি নিশ্চিত যে প্রতিটি উদাহরণের জন্য আলাদা শ্রোতা থাকবে

— মাইক্রোনিক্স

112

একটি দ্রুত টিপ যা আমাকে তারা কী করে তা মনে রাখতে সহায়তা করে -

HostBinding('value') myValue; ঠিক হিসাবে একই [value]="myValue"

এবং

HostListener('click') myClick(){ } ঠিক হিসাবে একই (click)="myClick()"

HostBindingএবং HostListenerনির্দেশনা এবং অন্যান্য বেশী লেখা রয়েছে (...)এবং [..]ভিতরে টেমপ্লেট লেখা হয় (উপাদান)।

— শাই রেজনিক - হাইরেজ.ইও
সূত্র

9

আহ, এটি আমার সাথে ক্লিক করেছে (পাং উদ্দেশ্যে) এই উত্তরের জন্য ধন্যবাদ। @HostListenerসাধারণত ইভেন্ট বন্ডিংয়ের জন্য আপনার যখন ডোমটিতে কিছু না থাকে তখন যাওয়ার উপায়, যেমন আমার ক্ষেত্রে কীবোর্ড ইনপুট।

— মিঃবোজ্যাংলেস

46

এখানে একটি বেসিক হোভার উদাহরণ রয়েছে।

উপাদানগুলির টেম্পলেট সম্পত্তি:

টেমপ্লেট

<!-- 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" ;
  } 
}

— serkan
সূত্র

28

আমি এই গৃহীত উত্তরটিকে জিজ্ঞাসিত প্রশ্নের উত্তর হিসাবে দেখছি না। আপনি কিছু ব্যাখ্যা প্রদান যত্ন নিতে হবে? C_colorrr, c_onEnterrr (), c_onLeaveee এই নির্দিষ্ট কোড স্নিপেটে কি পছন্দ করেন?

— luqo33

1

আমি মনে করি এটি মাউস প্রবেশের ইভেন্টটিকে নীলতে এবং মাউস ছাড়ার ইভেন্টটিকে হলুদ করে তুলবে।

— মিশা জিওব্রো

আপনি নির্দেশকে কোথায় রাখবেন মার্কআপে? দেখে মনে হচ্ছে আপনি এটি বডি ট্যাগে রাখবেন তবে এটি মূল উপাদানটির বাইরে থাকবে। আপনি যদি এই উত্তরের দ্বারা বিভ্রান্ত হন তবে এই লিঙ্কটি ng2.codecraft.tv/custom-directives/hostlistener-

— এবং-

@ এমটিপল্টজ এটি ক্লাসে রয়েছে।

— সারকান

33

আরেকটি সুন্দর জিনিস @HostBindingহ'ল আপনি @Inputযদি এটির সাথে একত্রিত করতে পারেন তবে আপনার বাঁধাই সরাসরি কোনও ইনপুটের উপর নির্ভর করে, যেমন:

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

— altschuler
সূত্র

1

আপনি দয়া করে ব্যবহারের উপর উদাহরণ ভাগ করতে পারেন @Input()?

— মানো

উদাহরণটি আমার

— উত্তরটিতে

1

আমি মনে করি আমি যা অনুপস্থিত তা হ'ল এটি কীভাবে কেবল ব্যবহার থেকে পৃথক @HostBinding। আপনার কখন ব্যবহার করা দরকার @Input?

— 1252748

11

এই বিষয়টিতে বিভ্রান্তি যুক্ত করার একটি জিনিস হ'ল সাজসজ্জার ধারণাটি খুব পরিষ্কার করে দেওয়া হয় না, এবং যখন আমরা এরকম কিছু বিবেচনা করি ...

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

এটি কাজ করে, কারণ এটি একটি getপ্রবেশকারী । আপনি কোনও ফাংশন সমতুল্য ব্যবহার করতে পারবেন না:

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

অন্যথায়, ব্যবহারের সুবিধা @HostBindingহ'ল বাউন্ড মানটি পরিবর্তন হলে পরিবর্তন সনাক্তকরণ চালানো হবে বলে আশ্বাস দেয়।

— সম্পন্ন
সূত্র

8

সারসংক্ষেপ:

@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 আমাদের উপাদানগুলির সম্পত্তিও
ফলাফলটি এমন হবে যে যখনই কেউ উপাদানটিতে ক্লিক করেন রঙ আপডেট করা হবে be

এতে ব্যবহার `@Directive`:

যদিও এটি উপাদান ব্যবহার করা যেতে পারে এই আলংকারকগুলি প্রায়শই একটি গুণাবলী নির্দেশে ব্যবহৃত হয়। @Directiveহোস্টে যখন ব্যবহৃত হয় তখন সেই উপাদানটি পরিবর্তন করে যার উপরে নির্দেশিকা রাখা হয়। উদাহরণস্বরূপ এই উপাদান টেমপ্লেটটি একবার দেখুন:

<p p_Dir>some paragraph</p>

এখানে পি_ডির উপাদানটির জন্য একটি নির্দেশিকা । নির্দেশিকা ক্লাসের মধ্যে @HostBindingবা কখন @HostListenerব্যবহৃত হয় হোস্টটি এখন রেফারেন্স দেবে ।

— উইলেম ভ্যান ডার ভীন
সূত্র

6

কম জারগন সহ থিওরি

@ হোস্টলিস্টনেঞ্জিং মূলত হোস্ট উপাদানটি বলে (একটি বোতাম) কোনও ব্যবহারকারীর দ্বারা কোন ক্রিয়া শুনছে এবং একটি নির্দিষ্ট ফাংশন সম্পাদন করে সতর্কতা ("আহো!") বলে থাকে যখন @ হোস্টবাইন্ডিং অন্যভাবে হয়। এখানে আমরা অভ্যন্তরীণভাবে সেই বোতামটিতে ঘটে যাওয়া পরিবর্তনগুলি শুনি (শ্রেণীর সাথে কী ঘটেছিল তা ক্লিক করার সময় বলুন) এবং আমরা সেই পরিবর্তনটি অন্য কিছু করতে ব্যবহার করি, বলি একটি নির্দিষ্ট রঙ নির্গত করে।

উদাহরণ

আপনি কোন উপাদানটিতে একটি পছন্দসই আইকন তৈরি করতে চান সেই দৃশ্যের কথা চিন্তা করুন, এখন আপনি জানেন যে আইটেমটির শ্রেণি পরিবর্তনের সাথে তার পছন্দসই হয়েছে কিনা তা আপনাকে জানতে হবে, এটি নির্ধারণের জন্য আমাদের একটি উপায় প্রয়োজন। ঠিক সেখানেই @ হোস্টবাইন্ডিং আসবে।

এবং যেখানে ব্যবহারকারীদের দ্বারা বাস্তবে কোন ক্রিয়া সম্পাদন করা হয়েছিল তা জানা দরকার যেখানে @ হোস্টলিস্টিংিং আসে

— Ralphkay
সূত্র

3

এটি বিভ্রান্তিকর এবং সাজসজ্জারের নামগুলি সঠিক নয়।

— matmancini