Question

我正在使用一个组件来显示画布图像。它第一次工作正常。显示后我隐藏了它，但在我再次显示该组件后，它显示了我之前的图像，但我已经更改了图像源。

所以我想问一下，有什么方法可以销毁这个组件实例，这样当它再次渲染时会重新初始化所有内容吗？

我想重新初始化它，因为组件中还有许多其他成员变量，我希望它们也能重新初始化。

注意：已尝试过ngonchange

Answer 1

可以通过创建动态组件......

您必须按照以下步骤执行此操作：

在您的父html中

：

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

在您的父组件.ts文件中：

@ViewChild("dynamic", {read: ViewContainerRef}) container;
componentRef: ComponentRef<any>;

constructor(...
              private resolver: ComponentFactoryResolver
...) 

    createComponent() {
      if (this.componentRef) this.componentRef.destroy();
      this.container.clear();
      const factoryGleam: ComponentFactory<YourComponent> = this.resolver.resolveComponentFactory(YourComponent);
      this.componentRef = this.container.createComponent(factoryGleam);
}

ngOnDestroy() {
if (this.componentRef) this.componentRef.destroy();
}

如果要再次创建组件，请使用createComponent（）方法...

在您的父模块中：

  ...
  providers: ...,
  entryComponents: [YourComponent]

或者您可以阅读这篇文章： https://medium.com/front-end-hacking/dynamically-add-components-to-the-dom-with-angular-71b0cb535286

Answer 2

通过*ngFor模板的一点点破解，您可以在更改时创建新实例：

模板：

<ng-template #MyTemplate let-name="name">
  <hello name="{{ name }}"></hello>
</ng-template>

<ng-container *ngFor="let value of values">
  <ng-container *ngTemplateOutlet="MyTemplate;context:{name: value}">
  </ng-container>
</ng-container>

<input type="text" [(ngModel)]="name" (ngModelChange)="change($event)">

组件：

  values = ['Template'];


  change(event) {
    this.values.pop();
    this.values.push(event);
  }

You can find a running example here.计数显示实例数。

Answer 3

所以我想问一下，有什么办法可以摧毁这个实例组件，以便在再次渲染时重新初始化一切？

<强> Code example

在您的父组件模板中：

  <child-comp *ngIf="isShown">
  </child-comp>
   <button (click)="toggleChild()">Toggle</button>
   <button (click)="reInit()">ReInitialize</button>

父组件类：

class ParentComponent{

    isShown = false;

    toggleChild(){       
       this.isShown = !this.isShown;
    }


    reInit() {
       this.isShown = false;
        setTimeout(() =>{
           this.isShown = true;
        });
    }
}

如果我们想立即重新初始化组件，则需要

setTimeout 。如果没有它，组件将不会在一个摘要周期中重新初始化。在第一个循环中，组件被销毁， setTimeout 强制在下一个循环中使用init组件。

以角度4重新实例化组件

3 个答案: