কৌণিকের মধ্যে @ নির্দেশিকা বনাম @ কম্পোনেন্ট

443

কৌণিক @Componentএবং এর @Directiveমধ্যে পার্থক্য কি ? উভয়ই একই কাজ করে বলে মনে হচ্ছে এবং একই বৈশিষ্ট্য রয়েছে।

ব্যবহারের ক্ষেত্রে কী কী এবং কখন একে অপরের চেয়ে বেশি পছন্দ করা যায়?

angular

13

কোনও উপাদানটি কোনও টেম্পলেট সহ একটি নির্দেশিকা এবং @Componentডেকরেটরটি আসলে @Directiveটেম্পলেট-ভিত্তিক বৈশিষ্ট্য - উত্স সহ প্রসারিত এক সাজসজ্জাকারী ।

— কসমিন আবাবেই

2

দিকনির্দেশক বনাম কম্পোনেন্ট হ'ল নতুন সার্ভিস বনাম কারখানা। বিভ্রান্তিটি আরও বৃদ্ধি পেয়েছে কারণ যখন উপাদানগুলির সংজ্ঞা থেকে অন্য উপাদানগুলির প্রয়োজন হয় যখন আপনি directivesঅ্যারেতে তাদের নির্দিষ্ট করেন ... সম্ভবত নীচে লিদা ওয়েং মন্তব্যটি কিছুটা পরিষ্কার করতে সহায়তা করে যে উপাদানটি "এটি আসলে একটি বর্ধিত 'নির্দেশিকা" "

— নোবিতা

1

উপাদানগুলি প্রকৃতপক্ষে নির্দেশকে প্রসারিত করে, তাদের নির্দেশনার বিপরীতে কেবলমাত্র আপনার একটি টেম্পলেট (এইচটিএমএল) থাকা দরকার .. সুতরাং আপনি বিদ্যমান এইচটিএমএল উপাদানটি সংশোধন করতে নির্দেশ ব্যবহার করবেন এবং উপাদানটি এইচটিএমএল উপাদানগুলি তৈরি করে

— মার্কো নিকিফোরোভিচ

546

একটি @ কম্পোমেন্টের একটি ভিউ প্রয়োজন যেখানে একটি @ নির্দেশিকা না করে।

ডিরেক্টিভ

আমি একটি @ নির্দেশকে বিকল্পের সাথে একটি কৌণিক 1.0 নির্দেশের সাথে তুলনা করেছি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>

উপাদান

কোনও উপাদান, আচরণ যুক্ত / সংশোধন করার পরিবর্তে সংযুক্ত আচরণের সাথে তার নিজস্ব দৃষ্টিভঙ্গি (ডিওএম উপাদানগুলির শ্রেণিবিন্যাস) তৈরি করে। এটির জন্য উদাহরণস্বরূপ ব্যবহারের কেসটি কোনও পরিচিতি কার্ডের উপাদান হতে পারে:

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 উপাদান যা আমরা আমাদের প্রয়োগের যে কোনও জায়গায় এমনকি অন্য উপাদানগুলির মধ্যেও ব্যবহার করতে পারি। এগুলি মূলত আমাদের অ্যাপ্লিকেশনগুলির ইউআই বিল্ডিং ব্লকগুলি তৈরি করে।

সংক্ষেপে

আপনি যখন কাস্টম আচরণের সাথে ইউআই এর DOM উপাদানগুলির পুনরায় ব্যবহারযোগ্য সেট তৈরি করতে চান তখন কোনও উপাদান লিখুন। আপনি বিদ্যমান ডিওএম উপাদানগুলির পরিপূরক হিসাবে পুনঃব্যবহারযোগ্য আচরণ লিখতে চাইলে একটি নির্দেশিকা লিখুন।

সূত্র:

— jaker
সূত্র

2

@ ডাইরেক্টিভ টীকাতে টেমপ্লেট / টেম্পলেট ইউআরএল সম্পত্তি আছে?

— পারদীপ জয়ন

7

এই উত্তর এখনও সত্য? কৌণিক 2 টিউটোরিয়াল নিজেই একটি দর্শন ছাড়াই একটি উপাদান তৈরি করে

— তমাস হেজেডাস

এটি কোনও দর্শন ছাড়াই, তবে টেমপ্লেটুল বা টেম্পলেটটি উপাদানটিতে বাধ্যতামূলক

— লুকা ট্রাজি

4

আমি এই জাতীয় উত্তর পছন্দ করি, তবে কাঠামোর ক্ষেত্রে যখন গুরুত্বপূর্ণ পরিবর্তন ঘটে তখন আমি সত্যিই একটি আপডেটের তারিফ করব।

— মেমেট ওলসেন

এটি কিছুটা পরিবর্তন করা দরকার। কৌণিক 2 এপিআই পরিবর্তন হয়েছে। এখানে আর কোনও সজ্জা নেই।

— দাশ

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

আপনি কেন খুব বেশি হ্রাস পেয়েছেন তা নিশ্চিত নন। দেখে মনে হচ্ছে @ কম্পোনেন্টটি আমার জন্য একটি টেমপ্লেট (দর্শন উত্পন্ন করতে) সহ একটি দিকনির্দেশক।

— হ্যারি নিনহ

22

কৌনিক 2 এবং উপরে, "সবকিছুই একটি উপাদান” " উপাদানগুলি হ'ল প্রধান উপায় হ'ল পৃষ্ঠায় উপাদানগুলি এবং যুক্তিগুলি নির্দিষ্ট করে, কাস্টম উপাদান এবং বৈশিষ্ট্যগুলি যা আমাদের বিদ্যমান উপাদানগুলিতে কার্যকারিতা যুক্ত করে উভয়ের মাধ্যমে specify

http://learnangular2.com/components/

তবে Angular2 + এ কী নির্দেশনা রয়েছে?

বৈশিষ্ট্য নির্দেশাবলী উপাদানগুলির সাথে আচরণ সংযুক্ত করে।

কৌণিক ক্ষেত্রে তিন ধরণের নির্দেশনা রয়েছে:

উপাদানগুলি a একটি টেমপ্লেট সহ নির্দেশাবলী।

কাঠামোগত দিকনির্দেশনা D DOM উপাদান যুক্ত করে এবং মুছে ফেলার মাধ্যমে DOM বিন্যাস পরিবর্তন করুন।

গুণাবলী নির্দেশাবলী an কোনও উপাদান, উপাদান বা অন্য কোনও নির্দেশকের চেহারা বা আচরণ পরিবর্তন করুন।

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';
    }
}

সুতরাং এটি কী করে, এটি হলুদ ব্যাকগ্রাউন্ড যুক্ত করার সাথে আপনাকে উপাদান এবং এইচটিএমএল উপাদানগুলি প্রসারিত করবে এবং আপনি নীচের হিসাবে এটি ব্যবহার করতে পারেন:

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

যখন আমরা এইচটিএমএলে ট্যাগটি ব্যবহার করি, তখন এই উপাদানটি তৈরি করা হবে এবং কনস্ট্রাক্টরকে ডেকে ডাকা হবে।

— আলিরেজা
সূত্র

7

পরিবর্তন সনাক্তকরণ

শুধু @Componentপরিবর্তন সনাক্তকরণ গাছ একটি নোডের হতে পারে। এর অর্থ ChangeDetectionStrategy.OnPushআপনি একটি এ সেট করতে পারবেন না @Directive। এই সত্যতা সত্ত্বেও, একটি নির্দেশিকা থাকতে পারে @Inputএবং @Outputবৈশিষ্ট্যগুলি পেতে পারে এবং আপনি ChangeDetectorRefএটি থেকে হোস্ট উপাদানগুলির ইঞ্জেকশন করতে এবং পরিচালনা করতে পারেন । আপনার পরিবর্তন সনাক্তকরণ গাছের উপরে যখন কোনও দানাদার নিয়ন্ত্রণ প্রয়োজন তখন উপাদানগুলি ব্যবহার করুন।

— এভেজেনি মালয়ুতিন
সূত্র

6

প্রোগ্রামিং প্রসঙ্গে, নির্দেশাবলী সংকলককে অন্যথায় কীভাবে ইনপুট প্রক্রিয়াকরণ করতে পারে, অর্থাৎ কিছু আচরণ পরিবর্তন করতে পারে তার নির্দেশনা সরবরাহ করে।

"নির্দেশাবলী আপনাকে ডিওমের উপাদানগুলির সাথে আচরণ সংযুক্ত করার অনুমতি দেয়” "

নির্দেশাবলী 3 টি বিভাগে বিভক্ত:

গুণ
কাঠামোগত
উপাদান

হ্যাঁ, কৌনিক 2 এ, উপাদানগুলি এক ধরণের নির্দেশিকা। ডকের মতে,

“কৌণিক উপাদানগুলি নির্দেশের একটি উপসেট হয়। নির্দেশের মতো নয়, উপাদানগুলির সর্বদা একটি টেম্পলেট থাকে এবং একটি টেমপ্লেটের একটি উপাদান হিসাবে কেবল একটি উপাদান ইনস্ট্যান্ট করা যেতে পারে। "

কৌণিক 2 উপাদানগুলি ওয়েব উপাদান ধারণার একটি বাস্তবায়ন । ওয়েব উপাদান বিভিন্ন পৃথক প্রযুক্তি নিয়ে গঠিত। আপনি ওয়েব উপাদানগুলি পুনরায় ব্যবহারযোগ্য ব্যবহারকারী ইন্টারফেস উইজেট হিসাবে ভাবতে পারেন যা ওপেন ওয়েব প্রযুক্তি ব্যবহার করে তৈরি করা হয়েছে।

সুতরাং সংক্ষিপ্ত দিকনির্দেশগুলিতে স্ট্রাকচারাল, অ্যাট্রিবিউট এবং উপাদান উপাদানগুলির সমন্বয়ে আমরা DOM এর উপাদানগুলির সাথে আমরা আচরণটি সংযুক্ত করি mechanism
উপাদানগুলি নির্দিষ্ট ধরণের নির্দেশিকা যা আমাদের ওয়েব উপাদানগুলির কার্যকারিতা একে একে পুনরায় ব্যবহারযোগ্যতা - এনক্যাপসুলেটেড, আমাদের অ্যাপ্লিকেশন জুড়ে পুনরায় ব্যবহারযোগ্য উপাদানগুলি উপলভ্য করতে সক্ষম করে।

— শচিলা রানাওয়াকা
সূত্র

2

আপনি যদি অফিসিয়াল কৌনিক ডক্স উল্লেখ করেন

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

কৌণিক ক্ষেত্রে তিন ধরণের নির্দেশনা রয়েছে:

উপাদানগুলি a একটি টেমপ্লেট সহ নির্দেশাবলী।
কাঠামোগত দিকনির্দেশনা D DOM উপাদান যুক্ত করে এবং মুছে ফেলার মাধ্যমে DOM বিন্যাস পরিবর্তন করুন। যেমন * এনজিআইএফ
গুণাবলী নির্দেশাবলী an কোনও উপাদান, উপাদান বা অন্য কোনও নির্দেশকের চেহারা বা আচরণ পরিবর্তন করুন। যেমন [এনজি ক্লাস] lass

অ্যাপ্লিকেশন বাড়ার সাথে সাথে আমরা এই সমস্ত কোডগুলি বজায় রাখতে অসুবিধা পেয়েছি। পুনরায় ব্যবহারযোগ্যতার উদ্দেশ্যে, আমরা আমাদের যুক্তিগুলিকে স্মার্ট উপাদান এবং বোবা উপাদানগুলিতে পৃথক করি এবং আমরা ডমটিতে পরিবর্তন আনার জন্য নির্দেশাবলী (কাঠামোগত বা বৈশিষ্ট্য) ব্যবহার করি।

— অক্ষয় রাজপুত
সূত্র

1

উপাদান

উপাদানগুলি একটি কৌণিক অ্যাপ্লিকেশনটির সর্বাধিক প্রাথমিক ইউআই বিল্ডিং ব্লক। একটি কৌণিক অ্যাপে কৌণিক উপাদানগুলির একটি গাছ থাকে। কৌণিক আমাদের অ্যাপ্লিকেশন একটি উপাদান গাছ উপর নির্মিত হয় । প্রতিটি উপাদানটির টেমপ্লেট, স্টাইলিং, জীবনচক্র, নির্বাচক ইত্যাদি থাকা উচিত So সুতরাং, প্রতিটি উপাদানটির কাঠামো রয়েছে আপনি এগুলি পৃথক পৃথক পৃথক স্বতন্ত্র ওয়েব অ্যাপ্লিকেশন হিসাবে নিজের টেমপ্লেট এবং যুক্তি এবং যোগাযোগের সম্ভাবনা হিসাবে বিবেচনা করতে পারবেন এবং অন্যের সাথে একসাথে ব্যবহার করার সুযোগ পাবেন can উপাদান।

উপাদানটির জন্য নমুনা .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}}

তারপরে আপনি অ্যাপট্রেনিং কম্পোনেন্ট টেম্পলেটটিকে অন্যান্য উপাদানগুলিতে (এটি মডিউলে যুক্ত করার পরে) এর যুক্তি সহ রেন্ডার করতে পারেন

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

এবং ফলাফল হবে

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

যেমন অ্যাপট্রেনিং কম্পোনেন্টটি এখানে রেন্ডার করা হয়েছিল

উপাদান সম্পর্কে আরও দেখুন

ডিরেক্টিভ

নির্দেশাবলী একটি বিদ্যমান ডিওএম উপাদানটির উপস্থিতি বা আচরণকে পরিবর্তন করে changes উদাহরণস্বরূপ [এনজিস্টাইল] একটি নির্দেশিকা। নির্দেশাবলী উপাদানগুলি প্রসারিত করতে পারে (তাদের অভ্যন্তরে ব্যবহার করা যেতে পারে) তবে তারা পুরো অ্যাপ্লিকেশন তৈরি করে না । ধরা যাক তারা কেবল উপাদানগুলিকে সমর্থন করে। তাদের নিজস্ব টেম্পলেট নেই (তবে অবশ্যই আপনি তাদের সাথে টেমপ্লেটটি ম্যানিপুলেট করতে পারেন)।

নমুনা নির্দেশনা:

@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>

নির্দেশাবলী সম্পর্কে আরও দেখুন

— প্রেজেক স্ট্রুসিস্কি
সূত্র