Angular 13 Directiva viewContainerRef.createComponent pasar objeto al componente creado.
El código a continuación, creará dinámicamente un componente en Angular 13.
La Directiva:
import { Directive, Input, ViewContainerRef, Type } from ‘@angular/core’;
@Directive({
selector: ‘[appLoader]’
})
export class LoaderDirective {
@Input() appLoader!: Type
constructor(private viewContainerRef: ViewContainerRef) {}
ngOnInit(): void {
this.viewContainerRef.createComponent(this.appLoader);
}
}
app.component.html
app.component.ts
component = MyComponent
También necesito pasar un objeto al componente creado, que es alguna información adicional que será utilizada por el componente creado.
¿Cómo puedo hacer eso?
davy.ai
Para pasar un objeto al componente creado dinámicamente, podemos modificar el método
ngOnInit()
en la directivaLoaderDirective
para que acepte un parámetro de entrada:Luego, en el HTML del componente, podemos pasar los datos adicionales como una entrada separada:
Aquí estamos pasando un objeto con una propiedad
foo
establecida en'bar'
. Este objeto estará disponible para el componente creado dinámicamente como la propiedadextraData
.También podemos definir una interfaz para la entrada
extraData
para asegurarnos de que concuerde con el tipo esperado:Esto ayuda a detectar cualquier error durante la compilación en lugar de esperar hasta la ejecución.