javascript - @Directive v/s @Component in Angular




typescript (6)

कोणीय 2 और इसके बाद के संस्करण में, "सब कुछ एक घटक है।" घटक हम मुख्य तत्व हैं जो पेज पर तत्वों और तर्क का निर्माण करते हैं और दोनों कस्टम तत्वों और विशेषताओं के माध्यम से निर्दिष्ट करते हैं जो हमारे मौजूदा घटकों में कार्यक्षमता जोड़ते हैं।

http://learnangular2.com/components/

लेकिन फिर Angular2 + में क्या निर्देश हैं?

तत्वों को व्यवहार में संलग्न करने के निर्देश देते हैं।

कोणीय में तीन प्रकार के निर्देश हैं:

  1. घटक - एक टेम्पलेट के साथ निर्देशन।
  2. संरचनात्मक निर्देश- DOM तत्वों को जोड़कर और हटाकर DOM लेआउट को बदलते हैं।
  3. निर्देश दें- किसी तत्व, घटक या किसी अन्य निर्देश के स्वरूप या व्यवहार को बदलें।

https://angular.io/docs/ts/latest/guide/attribute-directives.html

तो Angular2 और इसके बाद के संस्करण में क्या हो रहा है, निर्देश ऐसे गुण हैं जो तत्वों और घटकों में कार्यशीलता जोड़ते हैं

Angular.io से नीचे के नमूने को देखें:

import { Directive, ElementRef, Input } from '@angular/core';

@Directive({ selector: '[myHighlight]' })
export class HighlightDirective {
    constructor(el: ElementRef) {
       el.nativeElement.style.backgroundColor = 'yellow';
    }
}

तो यह क्या करता है, यह पीले रंग की पृष्ठभूमि को जोड़ने के साथ आपके घटकों और HTML तत्वों का विस्तार करेगा और आप इसे नीचे के रूप में उपयोग कर सकते हैं:

<p myHighlight>Highlight me!</p>

लेकिन घटक नीचे की तरह सभी कार्यात्मकताओं के साथ पूर्ण तत्व बनाएंगे:

import { Component } from '@angular/core';

@Component({
  selector: 'my-component',
  template: `
    <div>Hello my name is {{name}}. 
      <button (click)="sayMyName()">Say my name</button>
    </div>
   `
})
export class MyComponent {
  name: string;
  constructor() {
    this.name = 'Alireza'
  }
  sayMyName() {
    console.log('My name is', this.name)
  }
}

और आप इसे नीचे के रूप में उपयोग कर सकते हैं:

<my-component></my-component>

जब हम HTML में टैग का उपयोग करते हैं, तो यह घटक बनाया जाएगा और निर्माणकर्ता को बुलाया और प्रस्तुत किया जाएगा।

@Directive में @Component और @Directive में क्या अंतर है? वे दोनों एक ही कार्य को करते प्रतीत होते हैं और एक ही विशेषता रखते हैं।

उपयोग के मामले क्या हैं और कब एक को दूसरे पर पसंद करना है?


अवयव

घटक एक कोणीय ऐप के सबसे बुनियादी यूआई बिल्डिंग ब्लॉक हैं। एक कोणीय एप्लिकेशन में कोणीय घटकों का एक पेड़ होता है। कोणीय में हमारा आवेदन एक घटक पेड़ पर बनाया गया है। प्रत्येक घटक का अपना टेम्पलेट, स्टाइल, जीवन चक्र, चयनकर्ता आदि होना चाहिए। इसलिए, प्रत्येक घटक की अपनी संरचना होती है। आप उन्हें स्वयं टेम्पलेट और तर्क के साथ एक अतिरिक्त स्वसंपूर्ण छोटे वेब अनुप्रयोग के रूप में मान सकते हैं और संवाद करने और अन्य के साथ प्रयोग करने की संभावना रखते हैं। अवयव।

घटक के लिए नमूना .ts फ़ाइल:

 import { Component } from '@angular/core'; @Component({ // component attributes selector: 'app-training', templateUrl: './app-training.component.html', styleUrls: ['./app-training.component.less'] }) export class AppTrainingComponent { title = 'my-app-training'; } 

और इसका / .app.component.html टेम्पलेट दृश्य:

 Hello {{title}} 

तब आप अन्य घटकों में अपने तर्क के साथ AppTrainingComponent टेम्पलेट प्रदान कर सकते हैं (इसे मॉड्यूल में जोड़ने के बाद)

 <div> <app-training></app-training> </div> 

और परिणाम होगा

 <div> my-app-training </div> 

AppTrainingComponent के रूप में यहां प्रस्तुत किया गया था

अवयवों के बारे में अधिक देखें

निर्देशों

निर्देश एक मौजूदा DOM तत्व की उपस्थिति या व्यवहार को बदल देता है। उदाहरण के लिए [ngStyle] एक निर्देश है। निर्देश घटकों का विस्तार कर सकते हैं (उनके अंदर उपयोग किया जा सकता है) लेकिन वे एक संपूर्ण एप्लिकेशन का निर्माण नहीं करते हैं । मान लीजिए कि वे सिर्फ घटकों का समर्थन करते हैं। उनके पास अपना स्वयं का टेम्पलेट नहीं है (लेकिन निश्चित रूप से, आप उनके साथ टेम्पलेट में हेरफेर कर सकते हैं)।

नमूना निर्देश:

 @Directive({ selector: '[appHighlight]' }) export class HighlightDirective { constructor(private el: ElementRef) { } @Input('appHighlight') highlightColor: string; @HostListener('mouseenter') onMouseEnter() { this.highlight(this.highlightColor || 'red'); } private highlight(color: string) { this.el.nativeElement.style.backgroundColor = color; } } 

और इसका उपयोग:

 <p [appHighlight]="color" [otherPar]="someValue">Highlight me!</p> 

निर्देशों के बारे में अधिक देखें


एक घटक एक निर्देश-के साथ एक टेम्पलेट है और @Component डेकोरेटर वास्तव में टेम्पलेट-उन्मुख सुविधाओं के साथ एक @Directive डेकोरेटर है।


एक प्रोग्रामिंग संदर्भ में, निर्देशक कंपाइलर को मार्गदर्शन प्रदान करते हैं कि यह कैसे बदले अन्यथा इनपुट को संसाधित करेगा, अर्थात कुछ व्यवहार को बदल देगा।

"निर्देश आपको DOM में तत्वों को व्यवहार संलग्न करने की अनुमति देता है।"

निर्देश 3 श्रेणियों में विभाजित हैं:

  • गुण
  • संरचनात्मक
  • अंग

हां, कोणीय 2 में, अवयव एक प्रकार के निर्देश हैं। डॉक्टर के अनुसार,

“कोणीय घटक निर्देशों का एक सबसेट हैं। निर्देशों के विपरीत, घटकों में हमेशा एक टेम्पलेट होता है और एक टेम्पलेट में एक तत्व के प्रति केवल एक घटक को त्वरित किया जा सकता है। "

कोणीय 2 घटक वेब घटक अवधारणा का एक कार्यान्वयन है। वेब घटकों में कई अलग-अलग प्रौद्योगिकियां होती हैं। आप वेब घटकों को पुन: प्रयोज्य उपयोगकर्ता इंटरफ़ेस विजेट के रूप में सोच सकते हैं जो खुली वेब तकनीक का उपयोग करके बनाए गए हैं।

  • इसलिए सारांश निर्देशों में वह तंत्र जिसके द्वारा हम डोम में तत्वों को व्यवहार से जोड़ते हैं , संरचनात्मक, गुण और घटक प्रकारों से मिलकर।
  • घटक विशिष्ट प्रकार के निर्देश हैं जो हमें वेब घटक कार्यक्षमता AKA पुन: प्रयोज्यता का उपयोग करने की अनुमति देते हैं - हमारे आवेदन भर में उपलब्ध समझाया, पुन: प्रयोज्य तत्व।

अवयव

  1. एक घटक को पंजीकृत करने के लिए हम @Component मेटा-डेटा एनोटेशन का उपयोग करते हैं।
  2. घटक एक निर्देश है जो कंपोनेटेड विज़ुअल बिहेवियर नामक घटक बनाने के लिए शैडो डोम का उपयोग करता है। आमतौर पर यूआई विजेट बनाने के लिए घटकों का उपयोग किया जाता है।
  3. घटक का उपयोग अनुप्रयोग को छोटे घटकों में तोड़ने के लिए किया जाता है।
  4. प्रति डोम तत्व में केवल एक घटक मौजूद हो सकता है।
  5. @View डेकोरेटर या @View टेम्पलेट अनिवार्य हैं।

आदेश

  1. निर्देशों को पंजीकृत करने के लिए हम @Directive मेटा-डेटा एनोटेशन का उपयोग करते हैं।
  2. किसी मौजूदा DOM तत्व में व्यवहार को जोड़ने के लिए निर्देश का उपयोग किया जाता है।
  3. निर्देश का उपयोग पुन: प्रयोज्य घटकों को डिजाइन करने के लिए किया जाता है।
  4. प्रति डोम तत्व में कई निर्देशों का उपयोग किया जा सकता है।
  5. निर्देश दृश्य का उपयोग नहीं करता है।

सूत्रों का कहना है:

http://www.codeandyou.com/2016/01/difference-between-component-and-directive-in-Angular2.html


एक @ समुदाय को एक दृश्य की आवश्यकता होती है जबकि एक @ अप्रत्यक्ष नहीं करता है।

निर्देशों

मैं विकल्प को restrict: 'A' करने के साथ एक कोणीय 1.0 निर्देश को @Directive पसंद करता हूं restrict: 'A' (निर्देशों का उपयोग करने की विशेषता नहीं है।) निर्देश मौजूदा डोम तत्व या मौजूदा घटक उदाहरण में व्यवहार जोड़ते हैं। एक निर्देश के लिए एक उदाहरण उपयोग मामला एक तत्व पर क्लिक करने के लिए होगा।

import {Directive} from '@angular/core';

@Directive({
    selector: "[logOnClick]",
    hostListeners: {
        'click': 'onClick()',
    },
})
class LogOnClick {
    constructor() {}
    onClick() { console.log('Element clicked!'); }
}

जो इस तरह इस्तेमाल किया जाएगा:

<button logOnClick>I log when clicked!</button>

अवयव

व्यवहार को जोड़ने / संशोधित करने के बजाय एक घटक, वास्तव में संलग्न व्यवहार के साथ अपना स्वयं का दृश्य (DOM तत्वों का पदानुक्रम) बनाता है। इसके लिए एक उदाहरण उपयोग मामला संपर्क कार्ड घटक हो सकता है:

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

@Component({
  selector: 'contact-card',
  template: `
    <div>
      <h1>{{name}}</h1>
      <p>{{city}}</p>
    </div>
  `
})
class ContactCard {
  @Input() name: string
  @Input() city: string
  constructor() {}
}

जो इस तरह इस्तेमाल किया जाएगा:

<contact-card [name]="'foo'" [city]="'bar'"></contact-card>

ContactCard एक पुन: प्रयोज्य यूआई घटक है जिसे हम अपने एप्लिकेशन में कहीं भी उपयोग कर सकते हैं, यहां तक ​​कि अन्य घटकों के भीतर भी। ये मूल रूप से हमारे अनुप्रयोगों के UI बिल्डिंग ब्लॉक्स को बनाते हैं।

संक्षेप में

जब आप कस्टम व्यवहार के साथ UI के DOM तत्वों का पुन: प्रयोज्य सेट बनाना चाहते हैं, तो एक घटक लिखें। जब आप मौजूदा DOM तत्वों को पूरक करने के लिए पुन: प्रयोज्य व्यवहार लिखना चाहते हैं, तो एक निर्देश लिखें।

सूत्रों का कहना है:






typescript