TypeScript - Angular'da @Directive ve @Component

Angular'da @Component ile @Directive arasındaki fark nedir? İkisi de aynı görevi yapıyor gibi görünüyor ve aynı özelliklere sahip.

Kullanım durumları nelerdir ve birini diğerine ne zaman tercih etmeliyiz?

Cevap #1

Bir @Component bir görünüm gerektirirken, bir @Directive gerektirmez.

Yönergeler

@Directive'i, restrict: 'A' seçeneğine sahip bir Angular 1.0 direktifi ile karşılaştırıyorum (Direktifler yalnızca öznitelik kullanımına sınırlı değildir.) Direktifler, mevcut bir DOM öğesine veya mevcut bir bileşen örneğine davranış ekler. Bir direktif için örnek kullanım durumu, bir öğeye tıklamayı kaydetmek olabilir.

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

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

Şöyle kullanılabilir:

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

Bileşenler

Bir bileşen, davranışı eklemek/değiştirmek yerine, aslında bağlı davranışlarla kendi görünümünü (DOM öğeleri hiyerarşisi) oluşturur. Bunun bir örnek kullanım durumu bir iletişim kartı bileşeni olabilir:

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

Şöyle kullanılabilir:

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

ContactCard, uygulamamızın herhangi bir yerinde, hatta diğer bileşenlerin içinde bile kullanabileceğimiz yeniden kullanılabilir bir UI bileşenidir. Bunlar temel olarak uygulamalarımızın UI yapı taşlarını oluşturur.

Özetle

Özelleştirilmiş davranışlarla bir UI'nin tekrar kullanılabilir DOM elemanları setini oluşturmak istediğinizde bir bileşen yazın. Mevcut DOM elemanlarını desteklemek için tekrar kullanılabilir bir davranış yazmak istediğinizde bir yönerge yazın.

Kaynaklar :

  • @Yönerge belgeleri
  • @Component belgeleri
  • Yardımcı blog yazısı

Cevap #2

Bileşenler

  1. Bir bileşeni kaydetmek için @Component meta-veri açıklamasını kullanırız.
  2. Bileşen, gömülü görsel davranışlar oluşturmak için shadow DOM kullanan bir yönergedir ve bu davranışlara bileşenler denir. Bileşenler genellikle kullanıcı arayüzü bileşenleri oluşturmak için kullanılır.
  3. Bileşen, uygulamayı daha küçük bileşenlere ayırmak için kullanılır.
  4. Her DOM öğesi başına yalnızca bir bileşen bulunabilir.
  5. Bileşende @View dekoratörü veya templateurl şablonu zorunludur.

Yönerge

  1. Yönergeleri kaydetmek için @Directive meta veri açıklamasını kullanırız.
  2. Yönerge, mevcut bir DOM öğesine davranış eklemek için kullanılır.
  3. Yönerge, yeniden kullanılabilir bileşenler tasarlamak için kullanılır.
  4. Her DOM öğesi için birden fazla yönerge kullanılabilir.
  5. Yönerge View kullanmaz.

Kaynaklar :

https://www.devdiscuss.com/difference-between-component-and-directive-in-angular-2/

Cevap #3

Bir bileşen, şablonlu bir yönergedir ve @Component dekoratörü aslında şablon odaklı özelliklerle genişletilmiş bir @Directive dekoratörüdür.

Cevap #4

Angular 2 ve sonrası sürümlerde, “her şey bir bileşendir.” Bileşenler, hem özel öğeler hem de mevcut bileşenlerimize işlevsellik ekleyen öznitelikler aracılığıyla sayfada öğeleri ve mantığı oluşturduğumuz ve belirttiğimiz ana yoldur.

http://learnangular2.com/components/

Peki Angular2+'da yönergeler ne yapar?

Öznitelik yönergeleri, davranışı öğelere ekler.

Angular'da üç tür yönerge vardır:

  1. Bileşenler—şablonlu yönergeler.
  2. Yapısal yönergeler—DOM öğelerini ekleyip çıkararak DOM düzenini değiştirir.
  3. Öznitelik yönergeleri—bir öğenin, bileşenin veya başka bir yönergenin görünümünü veya davranışını değiştirir.

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

Yani Angular2 ve sonrasında olan şu ki Directiveler, elementlere ve componentlere işlevsellik ekleyen özniteliklerdir.

Aşağıdaki Angular.io örneğine bakın:

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

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

Yani yaptığı şey, bileşenlerinizi ve HTML öğelerinizi sarı arka plan ekleyerek genişletir ve bunu aşağıdaki gibi kullanabilirsiniz:

<p myHighlight>Highlight me!</p>

Ancak bileşenler, aşağıdaki gibi tüm işlevselliklere sahip tam öğeler oluşturacaktır:

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

ve aşağıdaki gibi kullanabilirsiniz:

<my-component></my-component>

HTML’de etiketi kullandığımızda, bu bileşen oluşturulacak, yapıcı çağrılacak ve render edilecektir.

Cevap #5

@Component sadece @Directive sınıfının bir alt sınıfıdır. Buna derinlemesine girmeden önce, @Directive'in ne olduğunu anlamamız gerekiyor...

@Directive, DOM'a yeni bir öğe eklemesini veya mevcut bir öğeyi kaldırmasını ya da değiştirmesini söylemek için kullanılan bir dekoratördür. Yani, Angular herhangi bir dekoratörle karşılaştığında, bunları çalışma zamanında işler ve DOM'u buna göre değiştirir.

@Directive kullanarak Direktiflerimizi aşağıda gösterildiği gibi oluşturabiliriz

@Directive({
  selector: '[demoButtonColor]'
})
export class DemoButtonColorDirective {
  constructor(private elementRef: ElementRef) { };
  ngOnInit() {
    this.elementRef.nativeElement.style.backgroundColor = 'red';
  }
}

HTML'de Kullanım

<button demoButtonColor>RED BUTTON</button>

Şimdi @Component dekoratörünün ne olduğunu görelim

@Component, bir ek işlevselliğe sahip @Directive alt sınıfıdır. @Component kullanarak, çalışma zamanında DOM'a enjekte edilebilecek HTML şablonumuzu oluşturabiliriz.

@Component({
  selector: 'demo-color',
  template: '<h1>Hello There!</h1>'
})
class DemoColorComponent {}

Aşağıda gösterildiği gibi bunu herhangi bir başka bileşende yeniden kullanabiliriz

<div>
  <demo-color></demo-color>
</div>

Özetlemek gerekirse, DOM'un öğesini veya yapısını değiştirmek için kullanılabilecek özel bir yönerge oluşturmak üzere @Directive'i kullanın. Ve özel davranışlarla yeniden kullanılabilir UI bileşenleri oluşturmak istiyorsanız @Component'i kullanın.

Cevap #6

Programlama bağlamında, yönergeler derleyiciye, aksi takdirde girişi nasıl işleyeceğini değiştirmesi için rehberlik eder, yani bazı davranışları değiştirir.

Yönergeler, DOM'daki öğelere davranış eklemenizi sağlar.

yönergeler 3 kategoriye ayrılmıştır:

  • Özellik
  • Yapısal
  • Bileşen

Evet, Angular 2'de Bileşenler bir Tür Direktiftir. Dökümana göre,

Angular bileşenleri, yönergelerin bir alt kümesidir. Yönergelerin aksine, bileşenlerin her zaman bir şablonu vardır ve bir şablondaki bir öğe başına yalnızca bir bileşen örneklendirilebilir.

Angular 2 Bileşenleri, Web Bileşeni kavramının bir uygulamasıdır. Web Bileşenleri birkaç ayrı teknolojiden oluşur. Web Bileşenlerini, açık Web teknolojisi kullanılarak oluşturulmuş yeniden kullanılabilir kullanıcı arayüzü bileşenleri olarak düşünebilirsiniz.

  • Özetle direktifler, DOM'daki öğelere davranış eklediğimiz mekanizmadır ve Yapısal, Öznitelik ve Bileşen türlerinden oluşur.
  • Bileşenler, bize web bileşeni işlevselliğini kullandıran, yani yeniden kullanılabilirlik sağlayan - uygulamamızın her yerinde mevcut olan kapsüllenmiş, yeniden kullanılabilir öğeleri kullanmamıza olanak tanıyan belirli bir tür yönergedir.

Cevap #7

Bileşenler

Bileşenler, bir Angular uygulamasının en temel UI yapı taşlarıdır. Bir Angular uygulaması, Angular bileşenlerinden oluşan bir ağaç içerir. Angular'daki uygulamamız, bir bileşen ağacı üzerine inşa edilmiştir. Her bileşenin kendi şablonu, stili, yaşam döngüsü, seçici vb. olmalıdır. Yani, her bileşenin kendi yapısı vardır. Onları kendi şablonu ve mantığı olan ayrı, bağımsız küçük bir web uygulaması olarak düşünebilir ve diğer bileşenlerle iletişim kurma ve birlikte kullanma olanağına sahip olabilirsiniz.

Bileşen için örnek .ts dosyası:

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

ve onun ./app.component.html şablon görünümü:

Hello {{title}}

Daha sonra AppTrainingComponent şablonunu onun mantığıyla birlikte diğer bileşenlerde render edebilirsiniz (modüle ekledikten sonra)

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

ve sonuç olacak

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

AppTrainingComponent burada render edildiğinde

Bileşenler hakkında daha fazlasını gör

Yönergeler

Yönerge, mevcut bir DOM öğesinin görünümünü veya davranışını değiştirir. Örneğin [ngStyle] bir yönergedir. Yönergeler bileşenleri genişletebilir (içlerinde kullanılabilir) fakat tam bir uygulama oluşturmazlar. Diyelim ki sadece bileşenleri desteklerler. Kendi şablonları yoktur (ama elbette, şablonu onlarla manipüle edebilirsiniz).

Örnek talimat:

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

Ve kullanımı:

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

Yönergeler hakkında daha fazla bilgi edinin

İlgili makaleler