如何手动重新渲染组件Angular 5

问题描述

有没有一种方法可以手动重新渲染组件，例如当用户单击按钮时?

Is there a way I can re render a component manually, say when a user clicks a button??

我见过类似的帖子，但是这些帖子都不适合我，例如

I've seen similar posts but none of these worked for me for example here

例如，

renderComponent() {
   // force component re-render
}

推荐答案

如果您打算操纵视图(添加，删除或重新附加)，那么这里是一个示例:

If you meant to manipulate the view (add, remove or reattach) then here is an example:

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

import { ChildComponent } from './child.component';

@Component({
  selector: 'host-comp',
  template: `
    <h1>I am a host component</h1>

    <ng-container #vc><ng-container>

    <br>

    <button (click)="insertChildView()">Insert Child View</button>
    <button (click)="removeChildView()">Remove Child View</button>
    <button (click)="reloadChildView()">Reload Child View</button>

    <ng-template #tpl>
      <child-comp><child-comp>
    <ng-template>

  `
})
export class HostComponent implements AfterViewInit{

  @ViewChild('vc', {read: ViewContainerRef}) vc: ViewContainerRef;

  @ViewChild('tpl', {read: TemplateRef}) tpl: TemplateRef<any>;

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

此处的示例

这篇关于如何手动重新渲染组件Angular 5的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！