@Directive ve @Component in Açısal

Angular @Componentve @Directiveangular arasındaki fark nedir ? Her ikisi de aynı görevi yapıyor ve aynı özelliklere sahip görünüyor.

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

Bir @ Bileşeni bir görünüm gerektirirken, @Directive gerektirmez.

Direktifleri

Bir @Directive (Açısal 1.0) yönergesine seçeneği ile yöneliyorumrestrict: 'A' (Yönergeler, öznitelik kullanımı ile sınırlı değildir.) Yönergeler, varolan bir DOM öğesine veya mevcut bir bileşen örneğine davranış ekler. Bir yönerge için örnek kullanım örneği, bir öğeye tıklamayı günlüğe kaydetmek olabilir.

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

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

Hangi şekilde kullanılır:

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

Bileşenler

Bir bileşen, davranış eklemek / değiştirmek yerine, aslında ekli davranışla kendi görünümünü (DOM öğeleri hiyerarşisi) oluşturur. Bunun için örnek bir kullanım örneği bir kişi 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() {}
}

Hangi şekilde kullanılır:

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

ContactCarduygulamamızın herhangi bir yerinde, hatta diğer bileşenlerde bile kullanabileceğimiz yeniden kullanılabilir bir kullanıcı arayüzü bileşenidir. Bunlar temel olarak uygulamalarımızın UI yapı taşlarını oluşturur.

Özetle

Özel davranışa sahip UI'nin yeniden kullanılabilir DOM öğeleri kümesi oluşturmak istediğinizde bir bileşen yazın. Mevcut DOM öğelerini desteklemek için yeniden kullanılabilir davranış yazmak istediğinizde bir yönerge yazın.

Kaynaklar:

• @ Yönerge belgeleri
• @Bileşen belgeleri
• Yararlı blog yazısı

Bileşenler

1. Bir bileşeni kaydetmek için @Componentmeta veri ek açıklaması kullanıyoruz.
2. Bileşen, bileşenler adı verilen kapsüllenmiş görsel davranış oluşturmak için gölge DOM kullanan bir yönergedir. Bileşenler genellikle kullanıcı arabirimi widget'ları oluşturmak için kullanılır.
3. Bileşen, uygulamayı daha küçük bileşenlere ayırmak için kullanılır.
4. DOM öğesi başına yalnızca bir bileşen bulunabilir.
5. @View dekoratör veya templateurl şablonu bileşende zorunludur.

Direktif

1. Direktifleri kaydetmek için @Directivemeta-veri notu kullanıyoruz.
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. DOM öğesi başına birçok yönerge kullanılabilir.
5. Direktif Görünüm'ü kullanmaz.

Kaynaklar:

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

Bileşen, şablonla birlikte bir direktiftir ve @Componentdekoratör aslında @Directiveşablon odaklı özelliklerle genişletilmiş bir dekoratördür.

Açısal 2 ve üzeri, “her şey bir bileşendir.” Bileşenler, mevcut bileşenlerimize işlevsellik katan özel öğeler ve özellikler aracılığıyla sayfadaki öğeleri ve mantığı oluşturmamız ve belirtmemiz için ana yöntemdir.

http://learnangular2.com/components/

Peki Angular2 + 'da hangi direktifler geçerlidir?

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

Açısal'da üç tür direktif vardır:

1. Bileşenler — şablon içeren yönergeler.
2. Yapısal yönergeler — DOM öğelerini ekleyip kaldırarak DOM düzenini değiştirin.
3. Özellik yönergeleri — bir öğenin, bileşenin veya başka bir yöntemin görünümünü veya davranışını değiştirin.

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

Dolayısıyla, Açısal2 ve yukarısında olan şey Direktifler elemanlara ve bileşenlere fonksiyonellik katan niteliklerdir .

Aşağıdaki örneğe Angular.io'dan bakın:

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

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

Öyleyse, sarı arka plan ekleyerek bileşenleri ve HTML öğelerini genişletir ve aşağıdaki gibi kullanabilirsiniz:

<p myHighlight>Highlight me!</p>

Ancak bileşenler, aşağıdaki gibi tüm işlevlere 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>

Etiketi HTML'de kullandığımızda, bu bileşen oluşturulur ve yapıcı çağrılır ve oluşturulur.

Değişiklik tespiti

Yalnızca @Componentdeğişiklik algılama ağacındaki bir düğüm olabilir. Bu ChangeDetectionStrategy.OnPush, a ayarlayamayacağınız anlamına gelir @Directive. Buna rağmen, bir Direktif sahip olabilir @Inputve @Outputözelliklere sahip olabilir ve ana bilgisayar bileşenini bunlardan enjekte edebilir ve değiştirebilirsiniz ChangeDetectorRef. Bu nedenle, değişiklik algılama ağacınız üzerinde ayrıntılı bir denetime ihtiyacınız olduğunda Bileşenleri kullanın.

Bir programlama bağlamında, direktifler derleyiciye girişi nasıl işleyeceğini değiştirmek, yani bazı davranışları değiştirmek için rehberlik eder.

“Yönergeler DOM'daki öğelere davranış eklemenize izin verir.”

direktifler 3 kategoriye ayrılmıştır:

• nitelik
• Yapısal
• Bileşen

Evet, Açısal 2'de Bileşenler bir tür Yönerge'dir. Doc'a göre,

“Açısal bileşenler yönergelerin bir alt kümesidir. Yönergelerin aksine, bileşenlerin her zaman bir şablonu vardır ve bir şablondaki öğe başına yalnızca bir bileşen somutlaştırılabilir. ”

Açısal 2 Bileşenler, 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şturulan yeniden kullanılabilir kullanıcı arabirimi widget'ları olarak düşünebilirsiniz.

• Özet direktiflerinde Eklediğimiz mekanizma Yapısal, Nitelik ve Bileşen türlerinden oluşan DOM'daki öğelere davranış .
• Bileşenler, web bileşeni işlevselliğini kullanmamıza izin veren özel bir yönerge türüdür .

Resmi açısal dokümanlara başvurursanız

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

Açısal'da üç tür direktif vardır:

1. Bileşenler — şablon içeren yönergeler.
2. Yapısal yönergeler — DOM öğelerini ekleyip kaldırarak DOM düzenini değiştirin. örneğin * ngIf
3. Özellik yönergeleri — bir öğenin, bileşenin veya başka bir yöntemin görünümünü veya davranışını değiştirin. örneğin [ngClass].

Uygulama büyüdükçe, tüm bu kodları korumakta zorluk çekiyoruz. Yeniden kullanılabilirlik amacıyla, mantığımızı akıllı bileşenlerde ve aptal bileşenlerde ayırırız ve DOM'da değişiklik yapmak için direktifleri (yapısal veya nitelik) kullanırız.

Bileşenler

Bileşenler, bir Açısal uygulamanın en temel UI yapı taşıdır. Açısal bir uygulama Açısal bileşenlerin bir ağaç içerir. Angular uygulamamız bileşen ağaç üzerine inşa edilmiştir . Her bileşenin şablonu, stili, yaşam döngüsü, seçici vb. Olmalıdır. Böylece, her bileşenin yapısı vardır. Bunlara kendi şablonu ve mantığı ile ayrı bir küçük web uygulaması olarak davranabilir ve diğerleriyle iletişim kurma ve birlikte kullanma imkanı bileşenler.

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 ./app.component.html şablon görünümü:

Hello {{title}}

Sonra AppTrainingComponent şablonunu mantığı diğer bileşenlerde oluşturabilirsiniz (modüle ekledikten sonra)

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

ve sonuç olacak

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

AppTrainingComponent burada oluşturulduğu için

Bileşenler hakkında daha fazla bilgi edinin

Direktifleri

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

Örnek direktif:

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

Direktifler hakkında daha fazla bilgi edinin