Bir bileşeni doğrudan bir şablonda kullanmanın yanı sıra, bileşenleri dinamik olarak da oluşturabilirsiniz. Bir bileşeni dinamik olarak oluşturmanın iki ana yolu vardır: NgComponentOutlet ile bir şablonda veya ViewContainerRef ile TypeScript kodunda.
NgComponentOutlet Kullanımı #
NgComponentOutlet, bir şablonda belirli bir bileşeni dinamik olarak işleyen yapısal bir yönergedir.
@Component({ ... })
export class AdminBio { /* ... */ }
@Component({ ... })
export class StandardBio { /* ... */ }
@Component({
...,
template: `
<p>Profile for {{user.name}}</p>
<ng-container *ngComponentOutlet="getBioComponent()" /> `
})
export class CustomDialog {
@Input() user: User;
getBioComponent() {
return this.user.isAdmin ? AdminBio : StandardBio;
}
}Yönergenin yetenekleri hakkında daha fazla bilgi için NgComponentOutlet API reference kılavuzuna bakın.
ViewContainerRef Kullanımı #
Görünüm kapsayıcısı, Angular’ın bileşen ağacında içerik içerebilen bir düğümdür. Herhangi bir bileşen veya yönerge ViewContainerRef‘i enjekte ederek DOM’da o bileşen veya yönergenin konumuna karşılık gelen bir görünüm kapsayıcısına referans alabilir.
Bir bileşeni dinamik olarak oluşturmak ve render etmek için ViewContainerRef üzerinde createComponent metodunu kullanabilirsiniz. ViewContainerRef ile yeni bir bileşen oluşturduğunuzda, Angular bunu ViewContainerRef‘i enjekte eden bileşen veya yönergenin bir sonraki kardeşi olarak DOM’a ekler.
@Component({
selector: 'leaf-content',
template: `
This is the leaf content
`,
})
export class LeafContent {}
@Component({
selector: 'outer-container',
template: `
<p>This is the start of the outer container</p>
<inner-item />
<p>This is the end of the outer container</p>
`,
})
export class OuterContainer {}
@Component({
selector: 'inner-item',
template: `
<button (click)="loadContent()">Load content</button>
`,
})
export class InnerItem {
constructor(private viewContainer: ViewContainerRef) {}
loadContent() {
this.viewContainer.createComponent(LeafContent);
}
}Yukarıdaki örnekte, “İçeriği yükle” düğmesine tıklandığında aşağıdaki DOM yapısı ortaya çıkar:
<outer-container>
<p>This is the start of the outer container</p>
<inner-item>
<button>Load content</button>
</inner-item>
<leaf-content>This is the leaf content</leaf-content>
<p>This is the end of the outer container</p>
</outer-container>Lazy-loading bileşenleri #
Yukarıda açıklanan NgComponentOutlet ve ViewContainerRef yaklaşımlarının her ikisini de standart bir JavaScript dynamic import ile lazy-loaded bileşenleri işlemek için kullanabilirsiniz.
@Component({
...,
template: `
<section>
<h2>Basic settings</h2>
<basic-settings />
</section>
<section>
<h2>Advanced settings</h2>
<button (click)="loadAdvanced()" *ngIf="!advancedSettings">
Load advanced settings
</button>
<ng-container *ngComponentOutlet="advancedSettings" />
</section>`
})
export class AdminSettings {
advancedSettings: {new(): AdminSettings} | undefined;
async loadAdvanced() {
this.advancedSettings = await import('path/to/advanced_settings.js');
}
}Yukarıdaki örnek, bir düğmeye tıklandığında AdvancedSettings‘i yükler ve görüntüler.
