Przekazywanie komponentów w Angular2 - instrukcje kątowe, kątowe2-szablonowe, kątowe2

Powiedzmy, że chcę być bardzo abstrakcyjny i modułowy i chcę przekazywać komponenty jako dane wejściowe do komponentów potomnych.

Czy to jest możliwe?

Rozumiem, że mogę przekazać dane wejściowe iutworzyć komponent wewnętrznie, ale czasami chcę przekazać inny / komponenty, w przeciwnym razie musiałbym dostosować kod do każdego komponentu i nie mogę być abstrakcyjny na temat operacji.

Na przykład załóżmy, że mam komponent P jako arodzic i C jako dziecko, mam pewien cel dla C takiego projektu i chciałbym mieć C jako komponent wielokrotnego użytku, gdy tylko chcę wdrożyć ten określony projekt z elementami wewnątrz.

Teraz jeśli chcę mieć C (dwa osobne elementy)obejmijmy dwa różne komponenty nazwijmy je A i B. Chcę, aby P mógł przekazać je po utworzeniu do C, aby zachować streszczenie projektu, a jednocześnie móc używać komponentów jako zmiennej wewnątrz C.

Odpowiedzi:

Tak to mozliwe. W rzeczywistości tak działa kompozycja komponentów modułowych w Angular2.

Na przykład, jeśli masz komponent modalny i chcesz go używać w całej aplikacji, ale ten komponent jest tylko opakowaniem i konieczne jest dodanie do niego komponentów dynamicznych.

Oto przykład z 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;
}

Zainspirowany od przestarzała odpowiedź ComponentResolver
Można to zrobić w inny sposób odpowiedz TUTAJ

Przykład PLUNKER