Reutilizar componentes en Angular

se ha realizado una actualización reciente visitar la entrada

Añadir componentes dinámicos en angular (2019)

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)
  }
}

Insertando y reutilizando un componente en angular

<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>

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()
  }

}

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