Angular direktifleri, yeniden kullanılabilir davranışları kapsüllemek için harika bir yol sunar; direktifler bir öğeye nitelikler, CSS sınıfları ve olay dinleyicileri uygulayabilir.
Yönerge kompozisyon API’si, bir bileşenin ana öğesine TypeScript sınıfı içinden yönergeler uygulamanıza olanak tanır.
Bileşene yönerge ekleme #
Bir bileşenin dekoratörüne hostDirectives özelliği ekleyerek bir bileşene yönergeler uygularsınız. Bu tür yönergelere ana bilgisayar yönergeleri diyoruz.
Bu örnekte, MenuBehavior yönergesini AdminMenu‘nun ana öğesine uyguluyoruz. Bu, bir şablondaki <admin-menu> öğesine MenuBehavior uygulamakla benzer şekilde çalışır.
@Component({
standalone: true,
selector: 'admin-menu',
template: 'admin-menu.html',
hostDirectives: [MenuBehavior],
})
export class AdminMenu { }Çerçeve bir bileşeni oluşturduğunda, Angular her bir ana bilgisayar yönergesinin bir örneğini de oluşturur. Yönergelerin ana bilgisayar bağları bileşenin ana bilgisayar öğesine uygulanır. Varsayılan olarak, ana bilgisayar yönergesi girdileri ve çıktıları bileşenin genel API’sinin bir parçası olarak gösterilmez. Daha fazla bilgi için aşağıdaki Including inputs and outputs bölümüne bakın.
Angular, ana bilgisayar yönergelerini derleme zamanında statik olarak uygular. Çalışma zamanında dinamik olarak yönerge ekleyemezsiniz.
hostDirectives içinde kullanılan yönergeler bağımsız olmalıdır: true.
Angular, hostDirectives özelliğinde uygulanan yönergeler selector yok sayar.
Girdiler ve çıktılar dahil #
Bileşeninize hostDirectives uyguladığınızda, host direktiflerinden gelen girdiler ve çıktılar varsayılan olarak bileşeninizin API’sine dahil edilmez. HostDirectives‘teki girdiyi genişleterek bileşeninizin API’sine girdi ve çıktıları açıkça dahil edebilirsiniz:
@Component({
standalone: true,
selector: 'admin-menu',
template: 'admin-menu.html',
hostDirectives: [{
directive: MenuBehavior,
inputs: ['menuId'],
outputs: ['menuClosed'],
}],
})
export class AdminMenu { }Girişleri ve çıkışları açıkça belirterek, hostDirective ile bileşenin tüketicileri bunları bir şablona bağlayabilir:
<admin-menu menuId="top-menu" (menuClosed)="logMenuClosed()">Ayrıca, bileşeninizin API’sini özelleştirmek için hostDirective’den girişleri ve çıkışları takma ad olarak kullanabilirsiniz:
@Component({
standalone: true,
selector: 'admin-menu',
template: 'admin-menu.html',
hostDirectives: [{
directive: MenuBehavior,
inputs: ['menuId: id'],
outputs: ['menuClosed: closed'],
}],
})
export class AdminMenu { }<admin-menu id="top-menu" (closed)="logMenuClosed()">Başka bir yönergeye yönerge ekleme #
Bileşenlere ek olarak hostDirectives‘i diğer direktiflere de ekleyebilirsiniz. Bu, birden fazla davranışın geçişli olarak toplanmasını sağlar.
Aşağıdaki örnekte, Menu ve Tooltip olmak üzere iki yönerge tanımlıyoruz. Daha sonra bu iki yönergenin davranışını MenuWithTooltip içinde oluşturuyoruz. Son olarak, MenuWithTooltip‘i SpecializedMenuWithTooltip‘e uyguluyoruz.
SpecializedMenuWithTooltip bir şablonda kullanıldığında, Menu , Tooltip ve MenuWithTooltip yönergelerinin tümünün örneklerini oluşturur. Bu yönergelerin her birinin konak bağları SpecializedMenuWithTooltip‘in konak elemanına uygulanır.
@Directive({...})
export class Menu { }
@Directive({...})
export class Tooltip { }
// MenuWithTooltip can compose behaviors from multiple other directives
@Directive({
standalone: true,
hostDirectives: [Tooltip, Menu],
})
export class MenuWithTooltip { }
// CustomWidget can apply the already-composed behaviors from MenuWithTooltip
@Directive({
standalone: true,
hostDirectives: [MenuWithTooltip],
})
export class SpecializedMenuWithTooltip { }Ana bilgisayar yönergesi semantiği #
Direktif yürütme emri #
Ana bilgisayar yönergeleri, doğrudan bir şablonda kullanılan bileşenler ve yönergelerle aynı yaşam döngüsünden geçer. Ancak, ana bilgisayar yönergeleri her zaman kurucularını, yaşam döngüsü kancalarını ve bağlamalarını uygulandıkları bileşen veya yönergeden önce çalıştırır.
Aşağıdaki örnekte bir ana bilgisayar yönergesinin minimal kullanımı gösterilmektedir:
@Component({
standalone: true,
selector: 'admin-menu',
template: 'admin-menu.html',
hostDirectives: [MenuBehavior],
})
export class AdminMenu { }Buradaki uygulama sırası şöyledir:
- MenuBehavior anlık
- AdminMenu anlık
- MenuBehavior girdileri alır (ngOnInit)
- AdminMenu girdileri alır (ngOnInit)
- MenuBehavior ana bilgisayar bağlarını uygular
- AdminMenu ana bilgisayar bağlarını uygular
Bu işlem sırası, hostDirectives içeren bileşenlerin bir host yönergesi tarafından belirtilen tüm host bağlarını geçersiz kılabileceği anlamına gelir.
Bu işlem sırası, aşağıdaki örnekte gösterildiği gibi, iç içe geçmiş ana bilgisayar yönergeleri zincirlerine kadar uzanır.
@Directive({...})
export class Tooltip { }
@Directive({
standalone: true,
hostDirectives: [Tooltip],
})
export class CustomTooltip { }
@Directive({
standalone: true,
hostDirectives: [CustomTooltip],
})
export class EvenMoreCustomTooltip { }Yukarıdaki örnekte, yürütme sırası şöyledir:
- Tooltip anlık
- CustomTooltip anlık
- EvenMoreCustomTooltip anlık
- Tooltip girdileri alır (ngOnInit)
- CustomTooltip girdileri alır (ngOnInit)
- EvenMoreCustomTooltip girdileri alır (ngOnInit)
- Tooltip ana bilgisayar bağlarını uygular
- CustomTooltip ana bilgisayar bağlarını uygular
- EvenMoreCustomTooltip ana bilgisayar bağlarını uygular
Bağımlılık enjeksiyonu #
hostDirectives belirten bir bileşen veya yönerge, bu host yönergelerinin örneklerini enjekte edebilir ve bunun tersi de geçerlidir.
Bir bileşene ana bilgisayar yönergeleri uygulanırken, hem bileşen hem de ana bilgisayar yönergeleri sağlayıcıları tanımlayabilir.
HostDirectives içeren bir bileşen veya yönerge ile bu host yönergelerinin her ikisi de aynı enjeksiyon belirtecini sağlarsa, hostDirectives içeren sınıf tarafından tanımlanan sağlayıcılar host yönergeleri tarafından tanımlanan sağlayıcılara göre öncelikli olur.
Performans #
Yönerge kompozisyon API’si ortak davranışları yeniden kullanmak için güçlü bir araç sunarken, ana bilgisayar yönergelerinin aşırı kullanımı uygulamanızın bellek kullanımını etkileyebilir. Çok sayıda ana bilgisayar yönergesi kullanan bileşenler veya yönergeler oluşturursanız, uygulamanız tarafından kullanılan belleği istemeden balon haline getirebilirsiniz.
Aşağıdaki örnekte birkaç ana bilgisayar yönergesi uygulayan bir bileşen gösterilmektedir.
@Component({
standalone: true,
hostDirectives: [
DisabledState,
RequiredState,
ValidationState,
ColorState,
RippleBehavior,
],
})
export class CustomCheckbox { }Bu örnek, beş ana bilgisayar yönergesi içeren özel bir onay kutusu bileşeni bildirir. Bu, Angular’ın bir CustomCheckbox her işlendiğinde altı nesne oluşturacağı anlamına gelir; bileşen için bir tane ve her bir ana bilgisayar yönergesi için bir tane. Bir sayfadaki birkaç onay kutusu için bu durum önemli bir sorun teşkil etmeyecektir. Ancak, sayfanız bir tabloda olduğu gibi yüzlerce onay kutusu oluşturuyorsa, ek nesne tahsislerinin etkisini görmeye başlayabilirsiniz. Kullanım durumunuz için doğru kompozisyon modelini belirlemek üzere uygulamanızın profilini çıkardığınızdan her zaman emin olun.
