angular tutorial

Reutilizar componentes en Angular

Usando angular mas a fondo en algún momento llegue a una duda existencial, como puedo reutilizar componentes en Angular y repetir su funcionalidad de forma dinámica.

Así que me puse investigar y encontré varias soluciones interesante, pero hay una que me quedo muy clavada en mi mente, todo usando un services e insertando código, así que quise compartirlo.

Reutilizar componentes en angular con ReflectiveInjector

Realmente es algo dificil explicar esta clase, pero en palabras resumidas…

ReflectiveInjector es un contenedor de inyector que se usa para instaciar objectos y resolver los problemas de dependencias, este inyector remplaza a los nuevos operadores, automáticamente ve y resuelve las dependencias de los constructores, es decir que puedes usar tu mismo componente en otros componente pero sin afectar a un tercero.

Aunque la documentación nos dice que no usemos esta dependencia y usemos Injector.create, usaremos esta dependencia porque para código pequeños nos va bien, en otro post vamos a usar esta independencia.

Creando un servicio

Para comenzar toda esta magia tenemos que crear un servicio, si eres nuevo y no sabes que es un servicio te dejo este post.

Recuerden que tenemos que dar de alta el servicio en nuestro app.modules

import { ComponentFactoryResolver,
  Injectable,
  Inject,
  ReflectiveInjector } from '@angular/core';
  import {SectionsComponent} from '../sections/sections.component';

@Injectable({
  providedIn: 'root'
})
export class InsertcomponentService {
  factoryResolver:any;
  rootViewContainer:any;

  constructor(@Inject(ComponentFactoryResolver) factoryResolver) { 
    this.factoryResolver = factoryResolver
  }
  setRootViewContainerRef(viewContainerRef) {
    this.rootViewContainer = viewContainerRef
  }
  addDynamicComponent() {
    const factory = this.factoryResolver
                        .resolveComponentFactory(SectionsComponent)
    const component = factory
      .create(this.rootViewContainer.parentInjector)
    this.rootViewContainer.insert(component.hostView)
  }
}

En el método addDynamicComponent, vamos a ingresar el componente que vamos a reutilizar y lo que hacemos es capturar donde lo colocaremos con rootViewContainer que usamos para eso viewContainerRef.

viewContainerRef es un contenedor que tiene la ruta de un lugar(donde vamos a ingresar la nueva vista) y nos permite colocar una plantilla creada.

Insertando y reutilizando un componente en angular

Algo que si tengo que decir, que al reutilizar un componente en angular, basicamente la clase de ese componente no vamos a insertar nada del otro mundo, es decir hagamos el componente funcional como queramos.

Donde si vamos a modificar un poco y vamos a ver cosas nuevas en el el contenedor que mostraremos, en este caso yo use un componente llamado project donde unía dos vistas

reutilizar componentes en angular

en esta clase agregue el siguiente código

<section>
    <div class="sdiv">
        <div class="mockup">
            <app-mockup></app-mockup>
        </div>
        <div class="sectionp">
            <div *ngFor="let x of loadinfo">
                <app-sections page="{{x.id}}" title="{{x.title}}" description="{{x.description}}" nameimg="{{x.name_upload}}" idimg="{{x.id_img}}" pid="{{pid}}"></app-sections>

            </div>
            <ng-template #dynamic></ng-template>

        </div>
        <button (click)="ndate()" class="newdate" *ngIf="!block">+</button>
    </div>

</section>

donde podemos ver que agregamos un ng-template, este ng-template sirve para reutilizar componentes en angular.

el ts colocare la parte que ingresa nuestro componente:

import { Component, OnInit, Inject, ViewContainerRef, ViewChild, inject } from '@angular/core';
import {InsertcomponentService} from '../services/insertcomponent.service';


@Component({
  selector: 'app-project',
  templateUrl: './project.component.html',
  styleUrls: ['./project.component.css']
})
export class ProjectComponent implements OnInit {
  
  componentes:any;

  @ViewChild('dynamic', { 
    read: ViewContainerRef 
  }) viewContainerRef: ViewContainerRef;
  
  constructor(@Inject(InsertcomponentService) mycomponent) {
    this.componentes = mycomponent;
   }

  ngOnInit() {
    
  }
   
  ndate(){
    this.componentes.setRootViewContainerRef(this.viewContainerRef)
    this.componentes.addDynamicComponent()
  }

}

como podemos ver, insertamos ViewContainerRef, ViewChild, Iniciamos viewChild y pasamos las referencias de esta clase.

y por ultimo llamamos e insertamos nuestro codigo

this.componentes.setRootViewContainerRef(this.viewContainerRef) this.componentes.addDynamicComponent()

Con esto podemos reutilizar componentes en angular y ahorrar tiempo programando, si conocen alguna otra forma o encuentran una mejor solución no duden en comentar y dejar esa información, esto es solo una manera.

 

Deja un comentario

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.