Apa perbedaan antara Komponen dan Direktif?

Jawaban:

107

Pada dasarnya ada tiga jenis arahan di Angular2 menurut dokumentasi.

  • Komponen
  • Arahan struktural
  • Atribut direktif

Komponen

Ini juga merupakan jenis direktif dengan templat, gaya dan bagian logika yang merupakan jenis direktif paling terkenal di antara semua di Angular2. Dalam jenis arahan ini Anda dapat menggunakan arahan lain apakah itu kustom atau bawaan dalam @Componentanotasi seperti berikut:

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

Gunakan petunjuk ini dalam pandangan Anda sebagai:

<my-app></my-app>

Untuk petunjuk komponen saya telah menemukan tutorial terbaik di sini.

Arahan struktural

Seperti *ngFordan *ngIf, digunakan untuk mengubah tata letak DOM dengan menambahkan dan menghapus elemen DOM. dijelaskan di sini

Atribut direktif

Mereka digunakan untuk memberikan perilaku atau gaya kustom ke elemen yang ada dengan menerapkan beberapa fungsi / logika. SukangStyle adalah direktif atribut untuk memberikan gaya secara dinamis ke elemen. Kita dapat membuat direktif kita sendiri dan menggunakan ini sebagai atribut dari beberapa elemen standar atau kustom, berikut adalah contoh dari sebuah direktif sederhana:

Pertama kita harus mengimpor direktif dari @angular/core

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

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

Kita bisa menggunakan ini dalam tampilan seperti di bawah ini:

<span Icheck>HEllo Directive</span>

Untuk info lebih lanjut Anda bisa membaca tutorial resminya disini dan disini

— Pardeep Jain
sumber
Apa jenis arahan "router-outlet"? Ini cocok dengan IMO tidak satupun dari tiga jenis di atas.
— pengguna2516186
1
di sini kita pergi tutorial yang bagus: dev6.com/angular/angular-2-the-three-types-of-directives
— Flames
64

Komponen memiliki tampilan sendiri (HTML dan gaya). Arahan hanyalah "perilaku" yang ditambahkan ke elemen dan komponen yang ada.
Componentmeluas Directive.

Karena itu hanya boleh ada satu komponen pada elemen host, tetapi beberapa direktif.

Arahan struktural adalah arahan yang diterapkan ke <template>elemen dan digunakan untuk menambah / menghapus konten (mencap template). Aplikasi *dalam direktif seperti *ngIfmenyebabkan <template>tag dibuat secara implisit.

— Günter Zöchbauer
sumber
7

Untuk melengkapi apa yang dikatakan Günter, kita dapat membedakan dua jenis arahan:

Semoga membantu Anda, Thierry

— Thierry Templier
sumber
2
Jangan melihat tujuan dari arahan atribut. Apa yang mereka tawarkan selain CSS?
— Tim McNamara
3
@TimMcNamara, direktif Angular dapat memiliki logika / metode, maka Anda dapat melakukan lebih banyak dengan direktif atribut daripada yang dapat Anda lakukan hanya dengan CSS. Anda bisa meneruskan beberapa nilai properti induk ke dalam sebuah atribut direktif dan elemen tersebut muncul atau berperilaku berbeda berdasarkan nilai properti tersebut.
— Mark Rajcok
Anda dapat menemukan contoh yang bagus di sini: angular.io/docs/ts/latest/guide/attribute-directives.html
— Joris Brauns
6

Inilah definisi sebenarnya.

  • Jika memiliki template , itu adalah Komponen
  • lain jika memiliki pemilih dalam tanda kurung "[likethis]", itu adalah Arahan Atribut
  • selain itu, itu adalah Petunjuk Struktural .

Definisi lainnya salah.

— John Henckel
sumber
Anda mendefinisikan kemunculannya, bukan apa adanya.
— imrok
3

Ringkasan:

Komponen adalah arahan dengan tampilan terkait (yaitu HTML yang akan dirender). Semua komponen adalah arahan, tetapi tidak semua arahan adalah komponen. Ada tiga jenis arahan:

  • Komponen : Tampilan dengan perilaku terkait. Jenis direktif ini sebenarnya menambahkan elemen DOM
  • Atribut direktif : Dapat dilampirkan ke elemen DOM (dan komponen karena mereka adalah elemen DOM) untuk mengubah tampilan atau perilaku elemen.
  • Arahan struktural : Dapat dilampirkan ke elemen DOM (dan komponen karena mereka adalah elemen DOM) untuk mengubah tata letak DOM. Arahan struktural dimulai dengan * dan benar-benar menambah atau menghapus elemen DOM. Misalnya *ngIfyang dapat menyisipkan atau menghapus elemen DOM (atau komponen sudut yang merupakan elemen DOM kustom, tetapi masih elemen DOM).

Contoh:

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;

}

Dalam contoh di atas kita dapat mengamati yang berikut ini:

  • Komponen tersebut AppComponentmemiliki template dengan<div> elemen yang ditampilkan, hai.
  • Atribut direktif HighlightDirective terletak di <div>elemen. Ini berarti akan memanipulasi perilaku file<div> elemen. Dalam hal ini, ini akan menyorot teks dan mengubahnya menjadi kuning.
  • Arahan struktural *ngIfjuga terletak pada <div>elemen dan akan menentukan apakah elemen akan dimasukkan. Ini <div>akan ditampilkan secara bersyarat tergantung pada apakah ekspresi myBooldapat dipaksakan true.
— Willem van der Veen
sumber
2

Angular 2 mengikuti model arsitektur komponen / Layanan.

Aplikasi sudut 2 terbuat dari komponen. Komponen adalah kombinasi dari template HTML dan kelas komponen (kelas skrip ketikan) yang mengontrol sebagian layar.

Untuk praktik yang baik, kelas komponen digunakan untuk pengikatan data ke tampilan masing-masing. Pengikatan data dua arah adalah fitur hebat yang disediakan oleh kerangka sudut.

Komponen dapat digunakan kembali di seluruh aplikasi Anda menggunakan nama pemilih yang disediakan.

Komponen juga merupakan jenis direktif dengan templat.

Dua arahan lainnya adalah

  1. Arahan struktural — ubah tata letak DOM dengan menambahkan dan menghapus elemen DOM. Contoh: NgFordan NgIf.

  2. Atribut direktif — mengubah tampilan atau perilaku elemen, komponen, atau arahan lain. Ex: NgStyle

— Malatesh Patil
sumber
0

Sebenarnya komponen juga merupakan arahan, tetapi memiliki perbedaan di antara keduanya.

Atribut Direktif :

Atribut direktif adalah kelas yang mampu mengubah perilaku atau tampilan sebuah elemen. Untuk membuat direktif atribut, terapkan @Directiveke kelas.

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

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

export class CustomAttrDirective {

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

Menambahkan file template.html atribut direktif

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

Arahan Struktural :

Arahan struktural mengubah tata letak dokumen HTML dengan menambahkan dan menghapus elemen, sebagai mikro-template. Arahan struktural memungkinkan konten ditambahkan secara bersyarat berdasarkan hasil ekspresi seperti *ngIfatau untuk konten yang sama diulang untuk setiap objek dalam sumber data seperti *ngFor.

Anda dapat menggunakan arahan bawaan untuk tugas-tugas umum, tetapi menulis arahan struktural khusus memberikan kemampuan untuk menyesuaikan perilaku dengan aplikasi Anda.

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

Komponen :

Komponen adalah arahan yang template mereka sendiri, daripada mengandalkan konten yang disediakan dari tempat lain. Komponen memiliki akses ke semua fitur direktif, masih memiliki elemen host, masih dapat mendefinisikan properti input dan output, dan sebagainya, tetapi mereka juga menentukan kontennya sendiri.

Mungkin mudah untuk meremehkan pentingnya template, tetapi atribut dan arahan struktural memiliki keterbatasan. Arahan dapat melakukan pekerjaan yang berguna dan kuat, tetapi mereka tidak memiliki banyak wawasan tentang elemen yang diterapkan padanya. Direktif paling berguna ketika mereka adalah alat tujuan umum, seperti ngModeldirektif, yang dapat diterapkan ke properti model data dan elemen formulir apa pun, tanpa memperhatikan untuk apa data atau elemen tersebut digunakan.

Komponen, sebaliknya, terkait erat dengan konten templatnya. Komponen menyediakan data dan logika yang akan digunakan oleh data binding yang diterapkan ke elemen HTML di template, yang menyediakan konteks yang digunakan untuk mengevaluasi ekspresi data binding dan bertindak sebagai perekat antara arahan dan aplikasi lainnya. Komponen juga merupakan alat yang berguna untuk memungkinkan proyek Angular besar dipecah menjadi beberapa bagian yang dapat dikelola.

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

dari sudut resmi

dari buku Pro-Angular

— fgul
sumber
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.