Prechádzajúce komponenty v Angular2 - uhlové, angular2-template, angular2-directives

Povedzme, že chcem byť veľmi abstraktný a modulárny a chcem odovzdávať komponenty ako vstup do mojich detských komponentov.

Je to možné?

Chápem, že dokážem odovzdať vstupy avytvoriť zložku interne, ale niekedy chcem odovzdať rôzne / komponenty inak by som musel prispôsobiť kód každej súčasti a nemôžem byť abstraktom o operácii.

Napríklad povedzme, že mám komponent P ako arodič a C ako dieťa, mám určitý účel takého dizajnu C a chcel by som mať C ako opakovane použiteľnú súčasť pre vždy, keď chcem implementovať tento istý dizajn s prvkami vo vnútri.

Teraz, ak chcem mať C (dva samostatné prvky)Otočte ich okolo dvoch rôznych komponentov, povedzme im A & B. Chcem, aby ich P po ich vytvorení preniesol do C, aby design zostal abstraktný, a zároveň by mohol komponenty používať iba ako premennú vo vnútri C.

odpovede:

Áno, je to možné. V skutočnosti je to, ako funguje kompozícia pre modulárne komponenty v Angular2.

Napríklad, ak máte modálny komponent a chcete ho používať v celej aplikácii, ale tento komponent je iba obal a je potrebné doň pridať dynamické komponenty.

Tu je príklad s ComponentFactoryResolver :

@Component({
selector: "my-dynamic-component",
template: "this is a dynamic injected component !"
})
export class MyDynamicComponent {}


@Component({
selector: "wrapper",
template: `
<div>
<p>Wrapper Component</p>
<template #dynamicComponent></template>
</div>
`
})
export class WrapperComponent {
@Input() contentComponent: any;
@ViewChild("dynamicComponent", { read: ViewContainerRef })

dynamicComponent: any;

constructor(private componentResolver: ComponentFactoryResolver) {}

ngAfterViewInit():void {
const factory = this.componentResolver.resolveComponentFactory(this.contentComponent);

this.dynamicComponent.createComponent(factory);
}
}


@Component({
selector: "my-app",
template: `
<wrapper [contentComponent]="MyDynamicComponent"></wrapper>`
})
export class AppComponent {
MyDynamicComponent: any = MyDynamicComponent;
}

Inšpirovaný z zastaraná odpoveď ComponentResolver
Ďalší spôsob, ako to dosiahnuť, je možné nájsť odpovedzte TU

Príklad PLUNKER