Angular 2 ile çalışmaya yeni başladım.
Angular 2'deki bileşenler ve yönergeler arasındaki farkların neler olduğunu merak ediyordum.
Yanıtlar:
Temel olarak Angular2'de belgelere göre üç tür yönerge vardır.
Ayrıca, Angular2'deki herkes arasında en ünlü yönerge türü olan şablon, stil ve mantık bölümü içeren bir yönerge türüdür. Bu tür bir direktifte, @Componentaşağıdaki gibi ek açıklamada özel veya yerleşik olan diğer yönergeleri kullanabilirsiniz :
@Component({
selector: "my-app"
directives: [custom_directive_here]
})
Bu yönergeyi kendi görüşünüzde şu şekilde kullanın:
<my-app></my-app>
Bileşen yönergesi için en iyi öğreticiyi burada buldum .
Gibi *ngForve *ngIf, DOM öğelerini ekleyip çıkararak DOM düzenini değiştirmek için kullanılır. burada açıklandı
Bazı işlevler / mantık uygulayarak mevcut öğelere özel davranış veya stil vermek için kullanılırlar. SevmekngStyle , öğelere dinamik olarak stil vermek için bir öznitelik yönergesidir. Kendi yönergemizi oluşturabilir ve bunu bazı önceden tanımlanmış veya özel öğelerin özniteliği olarak kullanabiliriz, işte basit bir yönerge örneği:
Öncelikle direktifleri buradan ithal etmeliyiz. @angular/core
import {Directive, ElementRef, Renderer, Input} from '@angular/core';
@Directive({
selector: '[Icheck]',
})
export class RadioCheckbox {
// custom logic here...
}
Bunu aşağıdaki görünümde kullanabiliriz:
<span Icheck>HEllo Directive</span>
Daha fazla bilgi için resmi öğreticiyi buradan ve buradan okuyabilirsiniz.
Bileşenlerin kendi görünümleri vardır (HTML ve stiller). Yönergeler, yalnızca mevcut öğelere ve bileşenlere eklenen "davranış" tır.
Componentgenişler Directive.
Bu nedenle, bir barındırma öğesinde yalnızca bir bileşen olabilir, ancak birden çok yönerge olabilir.
Yapısal yönergeler, <template>öğelere uygulanan yönergelerdir ve içerik eklemek / kaldırmak (şablonu damgalamak) için kullanılır. *Gibi direktif uygulamalarda *ngIfbir sebep <template>etiket örtük oluşturulacak.
Günter'in söylediklerini tamamlamak için iki tür yönergeyi ayırt edebiliriz:
NgForve NgIf. Bunlar şablon konseptiyle bağlantılıdır ve bir *. Daha fazla ayrıntı için bu bağlantıdaki "Şablonlar ve *" bölümüne bakın: http://victorsavkin.com/post/119943127151/angular-2-template-syntaxUmarım sana yardımcı olur, Thierry
İşte gerçek tanım.
Başka herhangi bir tanım yanlıştır.
Bir bileşen, ilişkili bir görünüme sahip bir yönergedir (yani, işlenecek HTML). Tüm bileşenler yönergedir, ancak tüm yönergeler bileşen değildir. Üç tür yönerge vardır:
*ngIf, bir DOM öğesini (veya özel bir DOM öğesi olan ancak yine de bir DOM öğesi olan açısal bileşeni) ekleyebilen veya kaldırabilen.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;
}
Yukarıdaki örnekte şunları gözlemleyebiliriz:
AppComponentbir <div>öğeye sahip bir şablona sahiptir .<div>öğenin üzerindedir. Bu, <div>öğenin davranışını değiştireceği anlamına gelir . Bu durumda metni vurgulayacak ve sarıya dönecektir.*ngIfde <div>elemanın üzerinde bulunur ve elemanın eklenip eklenmeyeceğini belirler. <div>Koşullu ekspresyonu bağlı olarak gösterilir myBoolcoerced edilebilir true.Angular 2, mimarinin bileşen / hizmet modelini takip eder.
Açısal 2 Uygulama bileşenlerden yapılmıştır. Bir bileşen, bir HTML şablonu ile ekranın bir bölümünü kontrol eden bir bileşen sınıfının (A typcript sınıfı) birleşimidir.
İyi uygulama için, ilgili görünüme veri bağlamak için bileşen sınıfı kullanılır. İki yönlü veri bağlama, açısal çerçeve tarafından sağlanan harika bir özelliktir.
Bileşenler, sağlanan seçici adı kullanılarak uygulamanızda yeniden kullanılabilir.
Bileşen ayrıca şablon içeren bir tür yönergedir.
Diğer iki yönerge
Yapısal yönergeler — DOM öğelerini ekleyip çıkararak DOM düzenini değiştirin. Ör: NgForve NgIf.
Öznitelik yönergeleri — bir öğenin, bileşenin veya başka bir yönergenin görünümünü veya davranışını değiştirin. Ör: NgStyle
Aslında bileşenler de yönergelerdir, ancak aralarında farklılıklar vardır.
Öznitelik Yönergeleri :
Öznitelik yönergeleri, tek bir elemanın davranışını veya görünümünü değiştirebilen sınıflardır. Bir öznitelik yönergesi oluşturmak için @Directive, bir sınıfa uygulayın.
import { Directive, ElementRef } from "@angular/core";
@Directive({
selector: "[custom-attr]", })
export class CustomAttrDirective {
constructor(element: ElementRef) {
element.nativeElement.classList.add("bg-success", "text-white");
}
}
Bir yönerge özniteliği template.html Dosyası ekleme
<tr *ngFor="let item of getProducts(); let i = index" custom-attr>
<td>{{i + 1}}</td>
<td>{{item.name}}</td>
</tr>
Yapısal Direktifler :
Yapısal yönergeler, mikro şablonlar olarak öğeler ekleyip çıkararak HTML belgesinin düzenini değiştirir. Yapısal yönergeler, içerik gibi bir ifadenin sonucuna bağlı olarak içeriğin koşullu olarak eklenmesine izin verir *ngIfveya aynı içeriğin, gibi bir veri kaynağındaki her nesne için tekrarlanması için *ngFor.
Yerleşik yönergeleri ortak görevler için kullanabilirsiniz, ancak özel yapısal yönergeler yazmak, davranışı uygulamanıza uyarlama yeteneği sağlar.
<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>
Bileşenler :
Bileşenler, başka bir yerden sağlanan içeriğe güvenmek yerine, kendi şablonlarını oluşturan yönergelerdir. Bileşenlerin tüm yönerge özelliklerine erişimi vardır, yine de bir barındırma elemanına sahiptir, yine de giriş ve çıkış özelliklerini tanımlayabilir vb. Ancak aynı zamanda kendi içeriklerini de tanımlarlar.
Şablonun önemini küçümsemek kolay olabilir, ancak öznitelik ve yapısal yönergelerin sınırlamaları vardır. Yönergeler yararlı ve güçlü işler yapabilir, ancak uygulandıkları unsurlar hakkında fazla bilgi sahibi değildirler. Yönergeler ngModel, verilerin veya öğenin ne için kullanıldığına bakılmaksızın herhangi bir veri modeli özelliğine ve herhangi bir form öğesine uygulanabilen yönerge gibi genel amaçlı araçlar olduklarında en yararlıdır .
Aksine, bileşenler şablonlarının içeriğine yakından bağlıdır. Bileşenler, şablondaki HTML öğelerine uygulanan, veri bağlama ifadelerini değerlendirmek için kullanılan bağlamı sağlayan ve yönergeler ile uygulamanın geri kalanı arasında tutkal görevi gören veri bağlamaları tarafından kullanılacak verileri ve mantığı sağlar. Bileşenler ayrıca, büyük Angular projelerin yönetilebilir parçalara bölünmesine izin veren yararlı bir araçtır.
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;
}