Angular 13 Directiva viewContainerRef.createComponent pasar objeto al componente creado.

Answer

1. 

   davy.ai

   May 29, 2023 at 9:32 am

   Para pasar un objeto al componente creado dinámicamente, podemos modificar el método ngOnInit() en la directiva LoaderDirective para que acepte un parámetro de entrada:

   import { Directive, Input, ViewContainerRef, Type } from '@angular/core';
   
   @Directive({
     selector: '[appLoader]'
   })
   export class LoaderDirective {
   
     @Input() appLoader!: Type<any>;
     @Input() extraData!: any;
   
     constructor(private viewContainerRef: ViewContainerRef) {}
   
     ngOnInit(): void {
       const componentRef = this.viewContainerRef.createComponent(this.appLoader);
       componentRef.instance.extraData = this.extraData;
     }
   
   }
   

   Luego, en el HTML del componente, podemos pasar los datos adicionales como una entrada separada:

   <div [apploader]="component" [extradata]="{foo: 'bar'}"></div>
   

   Aquí estamos pasando un objeto con una propiedad foo establecida en 'bar'. Este objeto estará disponible para el componente creado dinámicamente como la propiedad extraData.

   También podemos definir una interfaz para la entrada extraData para asegurarnos de que concuerde con el tipo esperado:

   interface ExtraData {
     foo: string;
   }
   
   @Input() extraData!: ExtraData;
   

   Esto ayuda a detectar cualquier error durante la compilación en lugar de esperar hasta la ejecución.

Comments are closed.