cli - angular material
Crear un componente angular2 con ng-content dinámicamente (1)
Me gustaría establecer el cuerpo de
<ng-content>
mientras instancia un componente dinámicamente usando
ComponentFactoryResolver
.
Veo que puedo obtener acceso a entrada y salida usando
ComponentRef
, pero no una forma de configurar
<ng-content>
.
Tenga en cuenta que
<ng-content>
que estoy planeando configurar puede contener texto simple / puede abarcar componentes creados dinámicamente
@Component({
selector: ''app-component-to-project'',
template: `<ng-content></ng-content>`
})
export class ComponentToProject implements AfterContentInit {
ngAfterContentInit() {
// We will do something important with content here
}
}
@Directive({
selector: ''appProjectionMarker''
})
export class ProjectionMarkerDirective implements OnInit {
constructor(private viewContainerRef: ViewContainerRef, private componentFactoryResolver: ComponentFactoryResolver) {
}
ngOnInit() {
const componentFactory: ComponentFactory<ComponentToProject> = this.componentFactoryResolver.resolveComponentFactory(ComponentToProject);
const componentRef: ComponentRef<ComponentToProject> = this.viewContainerRef.createComponent(componentFactory);
// Question: How to set content before the child''s afterContentInit is invoked
}
}
@Component({
selector: ''appTestComponent'',
template: `<div appProjectionMarker></div>`
})
export class TestComponent {}
Hay un parámetro
projectableNodes
para el método
vcRef.createComponent
createComponent<C>(componentFactory: ComponentFactory<C>, index?: number, injector?: Injector, projectableNodes?: any[][], ngModule?: NgModuleRef<any>): ComponentRef<C>;
Puede usarlo para inyectar dinámicamente un componente en otro.
Digamos que tenemos el siguiente componente
@Component({
selector: ''card'',
template: `
<div class="card__top">
<h2>Creating a angular2 component with ng-content dynamically</h2>
</div>
<div class="card__body">
<ng-content></ng-content>
</div>
<div class="card__bottom">
<ng-content></ng-content>
</div>
`
})
export class CardComponent {}
Queremos crearlo dinámicamente e insertar algunos controles en sus ubicaciones de
ng-content
.
Se podría hacer de la siguiente manera:
const bodyFactory = this.cfr.resolveComponentFactory(CardBodyComponent);
const footerFactory = this.cfr.resolveComponentFactory(CardFooterComponent);
let bodyRef = this.vcRef.createComponent(bodyFactory);
let footerRef = this.vcRef.createComponent(footerFactory);
const cardFactory = this.cfr.resolveComponentFactory(CardComponent);
const cardRef = this.vcRef.createComponent(
cardFactory,
0,
undefined,
[
[bodyRef.location.nativeElement],
[footerRef.location.nativeElement]
]
);
Ver también