घटक और निर्देश के बीच अंतर क्या है?

Question

मैंने अभी एंगुलर 2 के साथ काम करना शुरू किया है।

मैं सोच रहा था कि कोणीय 2 में घटकों और निर्देशों के बीच क्या अंतर हैं?

Comments

यह गुण निर्देश पृष्ठ पर डॉक्स में समझाया गया है , पहला खंड, "निर्देश अवलोकन"।

— मार्क राजकॉक

कोणीय 2

— जॉन

Answer 1

मूल रूप से प्रलेखन के अनुसार Angular2 में तीन प्रकार के निर्देश हैं।

• अंग
• संरचनात्मक निर्देश
• निर्देश का गुण

अंग

यह टेम्प्लेट, स्टाइल और लॉजिक पार्ट के साथ एक प्रकार का निर्देशन भी है जो Angular2 में सभी के बीच सबसे प्रसिद्ध प्रकार का निर्देशन है। इस प्रकार के निर्देशों में आप अन्य निर्देशों का उपयोग कर सकते हैं चाहे वह @Componentनिम्नलिखित की तरह एनोटेशन में कस्टम या बिलिन हो :

@Component({
    selector: "my-app"
    directives: [custom_directive_here]
})

इस निर्देश का उपयोग अपने विचार में करें:

<my-app></my-app>

घटक निर्देश के लिए मुझे यहां सबसे अच्छा ट्यूटोरियल मिला है।

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

जैसा *ngForऔर *ngIf, जोड़ने और डोम तत्वों को हटाने के द्वारा डोम लेआउट बदलने के लिए इस्तेमाल किया। यहाँ समझाया गया

निर्देश का गुण

उनका उपयोग कुछ तत्वों / तर्क को लागू करके मौजूदा तत्वों को कस्टम व्यवहार या शैली देने के लिए किया जाता है। जैसे ngStyleतत्वों को गतिशील रूप से शैली देने के लिए एक विशेषता निर्देश है। हम अपना स्वयं का निर्देश बना सकते हैं और इसे कुछ पूर्वनिर्धारित या कस्टम तत्वों की विशेषता के रूप में उपयोग कर सकते हैं, यहाँ एक सरल निर्देश का उदाहरण दिया गया है:

सबसे पहले हमें निर्देश का आयात करना होगा @angular/core

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

@Directive({
  selector: '[Icheck]',
})
export class RadioCheckbox {
   // custom logic here...
}

हम इसे नीचे दिखाए अनुसार उपयोग कर सकते हैं:

<span Icheck>HEllo Directive</span>

अधिक जानकारी के लिए आप आधिकारिक ट्यूटोरियल यहां और यहां पढ़ सकते हैं

Comments

Ive राउटर-आउटलेट ”किस प्रकार का निर्देश है? यह ऊपर के तीन प्रकारों में से किसी भी IMO से मेल नहीं खाता है।

— user2516186

यहाँ हम एक अच्छा ट्यूटोरियल चलते हैं: dev6.com/angular/angular-2-the-three-types-of-directives

— लपटें

Answer 2

घटकों का अपना दृष्टिकोण (HTML और शैलियाँ) होता है। निर्देश मौजूदा तत्वों और घटकों में सिर्फ "व्यवहार" हैं।
Componentफैली हुई है Directive।

उसके कारण मेजबान तत्व पर केवल एक घटक हो सकता है, लेकिन कई निर्देश।

संरचनात्मक निर्देश <template>तत्वों पर लागू होते हैं और सामग्री को जोड़ने / हटाने के लिए उपयोग किए जाते हैं। *की तरह निर्देश अनुप्रयोगों में *ngIfका कारण बनता है एक <template>टैग परोक्ष बनाया जाना।

Answer 3

गुंटर ने जो कहा उसे पूरा करने के लिए, हम दो प्रकार के निर्देशों को अलग कर सकते हैं:

• संरचनात्मक लोगों कि जोड़ने या तत्वों को हटाने के द्वारा डोम लेआउट अद्यतन करता है। दो सामान्य निम्न हैं NgForऔर NgIf। इन लोगों को टेम्प्लेट अवधारणा से जोड़ा जाता है और उन्हें पहले से उपसर्ग करना चाहिए *। अधिक विवरण के लिए इस लिंक में अनुभाग "टेम्पलेट और *" देखें: http://victorsavkin.com/post/119943127151/angular-2-template-syntax
• वे गुण जो उस तत्व की उपस्थिति के व्यवहार को अद्यतन करते हैं, जो वे संलग्न हैं।

आशा है कि यह आपकी मदद करता है, थियरी

Comments

विशेषता निर्देशों का उद्देश्य न देखें। वे सीएसएस से परे क्या पेश करते हैं?

— टिम मैकनामारा

@TimMcNamara, कोणीय निर्देशों में तर्क / विधियां हो सकती हैं, इसलिए आप केवल सीएसएस के साथ एक विशेषता निर्देश के साथ अधिक कर सकते हैं। आप कुछ मूल संपत्ति मान को एक विशेषता निर्देश में पास कर सकते हैं और उस गुण मान के आधार पर तत्व प्रकट या व्यवहार करते हैं।

— मार्क राजकॉक

आप यहां एक अच्छा उदाहरण पा सकते हैं: angular.io/docs/ts/latest/guide/attribute-directives.html

— जॉरिस ब्रून्स

Answer 4

यहाँ वास्तविक परिभाषा है।

• यदि इसका कोई टेम्पलेट है , तो यह एक घटक है
• इसके अलावा अगर इसे कोष्ठक में चयनकर्ता "[लिसेथिस]" किया जाता है, तो यह एक विशेषता निर्देशक है
• यह एक संरचनात्मक निर्देश है ।

कोई और परिभाषा गलत है।

Answer 5

सारांश:

एक घटक एक संबद्ध दृश्य के साथ एक निर्देश है (यानी HTML का प्रतिपादन किया जाना है)। सभी घटक निर्देश हैं, लेकिन सभी निर्देश घटक नहीं हैं। तीन प्रकार के निर्देश हैं:

• घटक : संबंधित व्यवहार के साथ एक दृश्य। इस प्रकार का निर्देश वास्तव में DOM तत्वों को जोड़ता है
• निर्देश को संलग्न करें: किसी तत्व की उपस्थिति या व्यवहार को संशोधित करने के लिए DOM तत्वों (और घटक चूंकि वे DOM तत्व हैं) से जुड़ा जा सकता है।
• संरचनात्मक निर्देश : DOM लेआउट को संशोधित करने के लिए DOM तत्वों (और घटक चूंकि वे DOM एलिमेंट्स हैं) से जुड़े हो सकते हैं। संरचनात्मक निर्देश एक * से शुरू होते हैं और वास्तव में DOM तत्व को जोड़ते या हटाते हैं। उदाहरण के लिए *ngIfजो एक DOM एलिमेंट (या कोणीय कंपोनेंट जो एक कस्टम DOM एलिमेंट है, लेकिन फिर भी DOM एलिमेंट है) को सम्मिलित या हटा सकता है।

उदाहरण:

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

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

@Component({
  selector: 'app-root',
  template: `
    <div *ngIf='myBool' appHighlight>Hi there</div>
  `,
  styleUrls: ['./app.component.scss'],
})
export class AppComponent  {

  myBool:boolean = true;

}

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

• घटक AppComponentमें एक <div>तत्व के साथ एक टेम्पलेट है जो प्रदर्शित करता है, हाय।
• विशेषता निर्देश हाइलाइटडायरेक्टिव <div>तत्व पर स्थित है । इसका मतलब यह <div>तत्व के व्यवहार में हेरफेर करेगा । इस मामले में यह पाठ को उजागर करेगा और इसे पीला कर देगा।
• संरचनात्मक निर्देश *ngIfभी <div>तत्व पर स्थित है और यह निर्धारित करेगा कि क्या तत्व डाला जाना है। <div>सशर्त पर कि क्या अभिव्यक्ति के आधार दिखाया जाएगा myBoolकरने के लिए मजबूर किया जा सकता है true।

Answer 6

कोणीय 2 वास्तुकला के घटक / सेवा मॉडल का अनुसरण करता है।

एक कोणीय 2 अनुप्रयोग घटकों से बना है। एक घटक HTML टेम्पलेट और एक घटक वर्ग (ए टाइपस्क्रिप्ट क्लास) का संयोजन है जो स्क्रीन के एक हिस्से को नियंत्रित करता है।

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

घटक आपके द्वारा प्रदत्त चयनकर्ता नाम का उपयोग करके पुन: प्रयोज्य हैं।

एक टेम्पलेट के साथ घटक भी एक प्रकार का निर्देश है।

अन्य दो निर्देश हैं

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

2. निर्देश दें- किसी तत्व, घटक या किसी अन्य निर्देश के रूप या व्यवहार को बदलें। उदाहरण के लिए: NgStyle

Answer 7

वास्तव में घटक भी निर्देश हैं, लेकिन उनके बीच मतभेद हैं।

गुण निर्देश :

विशेषता निर्देश एक वर्ग हैं जो किसी एकल तत्व के व्यवहार या उपस्थिति को संशोधित करने में सक्षम हैं। एक विशेषता निर्देश बनाने के @Directiveलिए एक वर्ग पर लागू करें ।

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

@Directive({
     selector: "[custom-attr]", })

export class CustomAttrDirective {

   constructor(element: ElementRef) {
      element.nativeElement.classList.add("bg-success", "text-white");    
   } 
}

एक निर्देश विशेषता टेम्पलेट जोड़ना। Html फ़ाइल

<tr *ngFor="let item of getProducts(); let i = index" custom-attr>
   <td>{{i + 1}}</td>
   <td>{{item.name}}</td>
</tr>

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

संरचनात्मक निर्देश तत्वों को जोड़कर और हटाकर HTML दस्तावेज़ के लेआउट को माइक्रो-टेम्प्लेट के रूप में बदलते हैं। संरचनात्मक निर्देश सामग्री को अभिव्यक्ति के परिणाम के आधार पर सशर्त रूप से जोड़े जाने की अनुमति देते हैं जैसे कि *ngIfया उसी सामग्री के लिए जैसे डेटा स्रोत में प्रत्येक वस्तु के लिए दोहराया जाना *ngFor।

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

<p *ngIf="true">
  Expression is true and ngIf is true.
  This paragraph is in the DOM.
</p>
<p *ngIf="false">
  Expression is false and ngIf is false.
  This paragraph is not in the DOM.
</p>

घटक :

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

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

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

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

import { Hero } from './hero';

@Component({
  selector: 'app-hero-child',
  template: `
    <h3>{{hero.name}} says:</h3>
    <p>I, {{hero.name}}, am at your service, {{masterName}}.</p>
  `
})
export class HeroChildComponent {
  @Input() hero: Hero;
  @Input('master') masterName: string;
}

आधिकारिक कोणीय से

प्रो-कोणीय पुस्तक से