Saltar al contenido

Cómo volver a renderizar un componente manualmente Angular 5

Este equipo de trabajo ha estado horas investigando para dar solución a tus búsquedas, te dejamos la resolución de modo que nuestro deseo es serte de mucha ayuda.

Solución:

Si tenía la intención de manipular la vista (agregar, eliminar o volver a adjuntar), aquí hay un ejemplo:

import  Component, ViewContainerRef, AfterViewInit, ViewChild, ViewRef,TemplateRef from '@angular/core';

import  ChildComponent  from './child.component';

@Component(
  selector: 'host-comp',
  template: `
    

I am a host component


` ) export class HostComponent implements AfterViewInit @ViewChild('vc', read: ViewContainerRef) vc: ViewContainerRef; @ViewChild('tpl', read: TemplateRef) tpl: TemplateRef; childViewRef: ViewRef; constructor() ngAfterViewInit() this.childViewRef = this.tpl.createEmbeddedView(null); insertChildView() this.vc.insert(this.childViewRef); removeChildView() this.vc.detach(); reloadChildView() this.removeChildView(); setTimeout(() => this.insertChildView(); , 3000);

ejemplo en vivo aquí

si te entiendo bien me estas preguntando ChangeDetectionStrategy
angular tiene dos opciones

enum ChangeDetectionStrategy 
  OnPush: 0
  Default: 1

Si usa el valor predeterminado, simplemente “volverá a renderizar” lo que ve después de cada evento, como un clic.

Si está utilizando OnPush, se volverá a procesar si usa observable con | asíncrono o puede inyectar ChangeDetectorRef y “preguntar” para volver a renderizar

constructor(private ref: ChangeDetectorRef) 
    setInterval(() => 
      this.numberOfTicks++;
      // the following is required, otherwise the view will not be updated
      this.ref.markForCheck();
    , 1000);
  

Pero esto es true si está ejecutando dentro de angular. A veces, si está escuchando servicios externos y se está ejecutando fuera de NgZone, debe ejecutar ngZone.run

this._ngZone.run(() =>  console.log('Do change detection here'); );

Puedes usar detectChanges() o markForCheck() para decirle a angular que vuelva a renderizar el componente nuevamente.

¡Haz clic para puntuar esta entrada!
(Votos: 2 Promedio: 4.5)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *