@Directive बनाम @Component in Angular

443

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

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

angular

— प्रसनजीत डे
स्रोत

13

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

— कॉसमैन अबाबेई

2

निर्देश बनाम घटक नई सेवा बनाम कारखाना है। भ्रम इसलिए भी बढ़ जाता है क्योंकि जब वास्तव में घटक की परिभाषा से अन्य घटकों की आवश्यकता होती है, तो आप उन्हें directivesसरणी में निर्दिष्ट करते हैं ... हो सकता है कि लिडा वेन्ग नीचे टिप्पणी करने से थोड़ा स्पष्ट हो जाता है कि घटक "यह वास्तव में एक विस्तारित 'निर्देश' है

— नोबिता

1

घटक वास्तव में निर्देशन का विस्तार करते हैं, उन्हें केवल निर्देशों के विपरीत आपको एक टेम्पलेट (HTML) की आवश्यकता होती है .. इसलिए आप मौजूदा HTML तत्व को संशोधित करने के लिए निर्देश का उपयोग करेंगे, और घटक html तत्व बनाते हैं

— Marko Niciforovic

546

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

निर्देशों

~~मैं विकल्प के साथ एक कोणीय 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 तत्वों को पूरक करने के लिए पुन: प्रयोज्य व्यवहार लिखना चाहते हैं, तो एक निर्देश लिखें।

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

— jaker
स्रोत

2

क्या @ प्रचारक एनोटेशन में टेम्प्लेट / टेम्पलेट है?

— परदीप जैन

7

क्या यह जवाब अभी भी सच है? कोणीय 2 ट्यूटोरियल अपने आप में एक घटक बनाता है

— तमास हेगडस

यह एक दृश्य के बिना है, लेकिन घटक में

— टेम्प्लाइटिकल

4

मुझे इस तरह के जवाब पसंद हैं, लेकिन मैं वास्तव में एक अपडेट की सराहना करूंगा जब फ्रेमवर्क में महत्वपूर्ण बदलाव होंगे।

— मेमेत ऑलसेन

इसे थोड़ा बदलने की जरूरत है। कोणीय 2 एपीआई बदल गया है। अब व्यू डेकोरेटर नहीं है।

— DaSch

79

अवयव

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

आदेश

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

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

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

— वीरेंद्र
स्रोत

5

घटक - बिंदु 4. मुझे लगता है कि यह गलत है - इसका उपयोग कई बार किया जा सकता है। यह वास्तव में एक विस्तारित 'निर्देशक' है

— लिडा वेंग

उदाहरणों के साथ इसका विस्तार कर सकते थे।

— मुकुस

इसका हमेशा शैडो डोम नहीं होता। दृश्य एनकैप्सुलेशन पर निर्भर करता है

— अनिरुद्ध

63

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

— यूसुफ़ टेज़ेल
स्रोत

3

निश्चित नहीं है कि आप बहुत अधिक नीचे क्यों गए हैं। ऐसा लगता है कि @Component मेरे लिए एक टेम्पलेट (दृश्य उत्पन्न करने के लिए) वाला एक निर्देश है।

— हैरी निन्ह

22

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

http://learnangular2.com/components/

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

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

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

घटक- एक टेम्पलेट के साथ निर्देशन।

संरचनात्मक निर्देश- DOM तत्वों को जोड़कर और हटाकर DOM लेआउट को बदलते हैं।

निर्देश दें- किसी तत्व, घटक या किसी अन्य निर्देश के स्वरूप या व्यवहार को बदलें।

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 में टैग का उपयोग करते हैं, तो यह घटक बनाया जाएगा और निर्माणकर्ता को बुलाया और प्रस्तुत किया जाएगा।

— एलिरेज़ा
स्रोत

7

पता लगाना बदलें

केवल @Componentपरिवर्तन का पता लगाने वाले पेड़ में एक नोड हो सकता है। इसका मतलब है कि आप निर्धारित नहीं कर सकते ChangeDetectionStrategy.OnPushएक में @Directive। इस तथ्य के बावजूद, एक निर्देश हो सकता है @Inputऔर @Outputगुण हो सकते हैं और आप होस्ट घटक ChangeDetectorRefसे इसे इंजेक्ट और हेरफेर कर सकते हैं । इसलिए घटकों का उपयोग करें जब आपको अपने परिवर्तन का पता लगाने वाले पेड़ पर एक दानेदार नियंत्रण की आवश्यकता होती है।

— एवगेनी माल्युटिन
स्रोत

6

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

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

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

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

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

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

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

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

— सचिला रणवाका
स्रोत

2

यदि आप आधिकारिक कोणीय डॉक्स देखें

https://angular.io/guide/attribute-directives

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

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

जैसे-जैसे एप्लिकेशन बढ़ता है हमें इन सभी कोड को बनाए रखने में कठिनाई होती है। पुन: प्रयोज्य उद्देश्य के लिए, हम अपने तर्क को स्मार्ट घटकों और गूंगे घटकों में अलग करते हैं और हम DOM में परिवर्तन करने के लिए निर्देशों (संरचनात्मक या विशेषता) का उपयोग करते हैं।

— अक्षय राजपूत
स्रोत

1

अवयव

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

घटक के लिए नमूना .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>

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

— प्रेज़ेमेक स्ट्रूसिस्की
स्रोत