@Directive vs @Component di Angular

Apa perbedaan antara @Componentdan @Directivedi Angular? Keduanya tampaknya melakukan tugas yang sama dan memiliki atribut yang sama.

Apa gunanya dan kapan harus lebih suka satu dari yang lain?

@Component membutuhkan tampilan sedangkan @Directive tidak.

Arahan

Saya menyamakan @Directive ke directive 1.0 Angular dengan opsirestrict: 'A' (Arahan tidak terbatas pada penggunaan atribut.) Arahan menambahkan perilaku ke elemen DOM yang ada atau contoh komponen yang ada. Salah satu contoh use case untuk arahan adalah untuk mencatat klik pada suatu elemen.

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

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

Yang akan digunakan seperti ini:

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

Komponen

Komponen, daripada menambahkan / memodifikasi perilaku, sebenarnya menciptakan pandangannya sendiri (hierarki elemen DOM) dengan perilaku terlampir. Contoh use case untuk ini mungkin komponen kartu kontak:

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

Yang akan digunakan seperti ini:

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

ContactCardadalah komponen UI yang dapat digunakan kembali yang dapat kita gunakan di mana saja dalam aplikasi kita, bahkan di dalam komponen lain. Ini pada dasarnya membentuk blok bangunan UI aplikasi kita.

Singkatnya

Tulis komponen saat Anda ingin membuat elemen DOM UI yang dapat digunakan kembali dengan perilaku khusus. Tulis arahan ketika Anda ingin menulis perilaku yang dapat digunakan kembali untuk melengkapi elemen DOM yang ada.

Sumber:

• @Direktif dokumentasi
• @Component dokumentasi
• Posting blog yang bermanfaat

Komponen

1. Untuk mendaftarkan komponen, kami menggunakan @Componentanotasi meta-data.
2. Komponen adalah arahan yang menggunakan bayangan DOM untuk membuat perilaku visual enkapsulasi yang disebut komponen. Komponen biasanya digunakan untuk membuat widget UI.
3. Komponen digunakan untuk memecah aplikasi menjadi komponen yang lebih kecil.
4. Hanya satu komponen yang dapat ditampilkan per elemen DOM.
5. @View dekorator atau templateurl adalah wajib dalam komponen.

Pengarahan

1. Untuk mendaftar arahan, kami menggunakan @Directiveanotasi meta-data.
2. Arahan digunakan untuk menambahkan perilaku ke elemen DOM yang ada.
3. Arahan digunakan untuk merancang komponen yang dapat digunakan kembali.
4. Banyak arahan dapat digunakan per elemen DOM.
5. Arahan tidak menggunakan View.

Sumber:

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

Komponen adalah direktif-dengan-template dan @Componentdekorator sebenarnya @Directivedekorator yang diperluas dengan fitur berorientasi template.

Dalam Angular 2 dan di atas, "semuanya adalah komponen." Komponen adalah cara utama kami membangun dan menentukan elemen dan logika pada halaman, melalui elemen dan atribut khusus yang menambah fungsionalitas ke komponen kami yang ada.

http://learnangular2.com/components/

Tapi arahan apa yang dilakukan di Angular2 +?

Arahan atribut melampirkan perilaku ke elemen.

Ada tiga jenis arahan dalam Angular:

1. Komponen — arahan dengan templat.
2. Arahan struktural — ubah tata letak DOM dengan menambahkan dan menghapus elemen DOM.
3. Arahan atribut — mengubah tampilan atau perilaku elemen, komponen, atau arahan lain.

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

Jadi apa yang terjadi di Angular2 dan di atas adalah Arahan adalah atribut yang menambah fungsionalitas ke elemen dan komponen .

Lihatlah contoh di bawah ini dari Angular.io:

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

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

Jadi apa yang dilakukannya, itu akan memperluas Anda komponen dan elemen HTML dengan menambahkan latar belakang kuning dan Anda dapat menggunakannya seperti di bawah ini:

<p myHighlight>Highlight me!</p>

Tetapi komponen akan membuat elemen penuh dengan semua fungsi seperti di bawah ini:

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

dan Anda dapat menggunakannya seperti di bawah ini:

<my-component></my-component>

Saat kami menggunakan tag dalam HTML, komponen ini akan dibuat dan konstruktor dipanggil dan dirender.

Ubah deteksi

Hanya @Componentbisa menjadi simpul di pohon deteksi deteksi. Ini berarti bahwa Anda tidak dapat mengatur ChangeDetectionStrategy.OnPushdalam @Directive. Terlepas dari kenyataan ini, Arahan dapat memiliki @Inputdan @Outputproperti dan Anda dapat menyuntikkan dan memanipulasi komponen host ChangeDetectorRefdari itu. Jadi gunakan Komponen ketika Anda membutuhkan kontrol granular atas pohon deteksi perubahan Anda.

Dalam konteks pemrograman, arahan memberikan panduan kepada kompiler untuk mengubah bagaimana itu akan memproses input, yaitu mengubah beberapa perilaku.

"Arahan memungkinkan Anda untuk melampirkan perilaku ke elemen di DOM."

arahan dibagi menjadi 3 kategori:

• Atribut
• Struktural
• Komponen

Ya, dalam Angular 2, Komponen adalah jenis Arahan. Menurut Doc,

“Komponen sudut adalah bagian dari arahan. Tidak seperti arahan, komponen selalu memiliki templat dan hanya satu komponen yang dapat dipakai per elemen dalam templat. "

Komponen 2 Sudut adalah implementasi dari konsep Komponen Web . Komponen Web terdiri dari beberapa teknologi terpisah. Anda dapat menganggap Komponen Web sebagai widget antarmuka pengguna yang dapat digunakan kembali yang dibuat menggunakan teknologi Web terbuka.

• Jadi dalam arahan ringkasan Mekanisme dengan mana kita melampirkan perilaku ke elemen dalam DOM, yang terdiri dari tipe Struktural, Atribut, dan Komponen.
• Komponen adalah tipe spesifik dari arahan yang memungkinkan kita untuk memanfaatkan fungsionalitas komponen web yang dapat digunakan kembali AKA - dienkapsulasi, elemen yang dapat digunakan kembali tersedia di seluruh aplikasi kita.

Jika Anda merujuk dokumen sudut resmi

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

Ada tiga jenis arahan dalam Angular:

1. Komponen — arahan dengan templat.
2. Arahan struktural — ubah tata letak DOM dengan menambahkan dan menghapus elemen DOM. mis. * ngIf
3. Arahan atribut — mengubah tampilan atau perilaku elemen, komponen, atau arahan lain. misal [ngClass].

Ketika Aplikasi tumbuh, kami mengalami kesulitan dalam mempertahankan semua kode ini. Untuk tujuan usabilitas, kami memisahkan logika kami dalam komponen pintar dan komponen bodoh dan kami menggunakan arahan (struktural atau atribut) untuk membuat perubahan di DOM.

Komponen

Komponen adalah blok bangunan UI paling dasar dari aplikasi Angular. Aplikasi Angular berisi pohon komponen Angular. Aplikasi kami di Angular dibangun di atas pohon komponen . Setiap komponen harus memiliki template, gaya, siklus hidup, pemilih, dll. Jadi, setiap komponen memiliki strukturnya Anda dapat memperlakukannya sebagai aplikasi web kecil terpisah yang terpisah dengan templat dan logika sendiri serta kemungkinan untuk berkomunikasi dan digunakan bersama dengan lainnya. komponen.

Sampel .ts file untuk Komponen:

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

dan tampilan templat ./app.component.html:

Hello {{title}}

Kemudian Anda dapat membuat templat AppTrainingComponent dengan logikanya di komponen lain (setelah menambahkannya ke dalam modul)

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

dan hasilnya akan

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

karena AppTrainingComponent diberikan di sini

Lihat lebih lanjut tentang Komponen

Arahan

Arahan mengubah penampilan atau perilaku elemen DOM yang ada. Misalnya [ngStyle] adalah arahan. Arahan dapat memperluas komponen (dapat digunakan di dalamnya) tetapi mereka tidak membangun keseluruhan aplikasi . Katakanlah mereka hanya mendukung komponen.Mereka tidak memiliki template sendiri (tetapi tentu saja, Anda dapat memanipulasi template dengan mereka).

Arahan sampel:

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

Dan penggunaannya:

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

Lihat lebih lanjut tentang arahan