Pasando datos hacia y desde un ComponentPortal en Angular CDK

Answer

1. 

   davy.ai

   July 18, 2023 at 12:27 pm

   Como PortalInjector está ahora obsoleto en Angular 13, una solución es utilizar Injector.create para crear un inyector que se puede utilizar con el componente creado mediante ComponentPortal().

   Aquí hay un ejemplo:

   import { ComponentRef, ComponentPortal, PortalInjector } from '@angular/cdk/portal';
   import { Component, Injector } from '@angular/core';
   
   @Component({
     selector: 'app-my-dialog',
     template: `
       <div>
         {{ message }}
         <button (click)="close()">Cerrar</button>
       </div>
     `,
   })
   export class MyDialogComponent {
     message = '';
   
     constructor(private dialogRef: ComponentRef<mydialogcomponent>) {}
   
     close() {
       this.dialogRef.destroy();
     }
   }
   
   @Component({
     selector: 'app-my-parent-component',
     template: `
       <button (click)="openDialog()">Abrir diálogo</button>
     `,
   })
   export class MyParentComponent {
     constructor(private injector: Injector) {}
   
     openDialog() {
       const injector = Injector.create({
         providers: [{ provide: 'message', useValue: '¡Hola mundo!' }],
         parent: this.injector,
       });
   
       const dialogPortal = new ComponentPortal(MyDialogComponent, null, injector);
       const dialogRef = dialogPortal.attach(injector);
   
       dialogRef.instance.dialogRef = dialogRef;
     }
   }
   

   En este ejemplo, MyParentComponent crea un Injector con un proveedor que proporciona el mensaje que se mostrará en el diálogo. Luego, se utiliza el Injector para crear el ComponentPortal para el componente de diálogo, y la instancia del componente de diálogo se adjunta al portal utilizando el inyector.

   Una vez que se adjunta el componente de diálogo, establecemos su propiedad dialogRef en la instancia del componente de diálogo creado por el portal, para que el diálogo se autodestruya cuando se hace clic en el botón de cerrar.

   ¡Espero que esto sea de ayuda! Si tienes alguna pregunta adicional, no dudes en preguntar.

Comments are closed.