angular - 销毁和重新加载子组件

Question

我需要能够完全重新加载子组件。似乎实现这一目标的最佳方法是使用简单的 *ngIf带有 bool 值；设置 false 删除组件，然后设置为 true 重新初始化它，即:

<app-child *ngIf="enabled"></app-child>

但是，似乎仅仅这样做还不足以快速删除/重新初始化组件:

reloadTree(){
  this.enabled = false;
  this.enabled = true; // doesn't work- child ngOnInit isn't called
}

相反，我必须使用 setTimeout在它起作用之前:

reloadTree(){
  this.enabled = false;
  const self = this;
  setTimeout(function(){
    self.enabled = true;
  }, 1);
}

我认为这与 Angular 呈现模板的方式有关？这不是特别优雅 - 任何人都可以提出更好的方法来实现我在这里尝试做的事情吗？谢谢

Answer 1

所以只是为了记录，而不是试图争论这是否是一种干净的方式，这里是你如何解决标志切换问题的方法。主要思想是销毁子组件并在之后再次创建它，您可以使用简单的 *ngIf 子组件上的标志。

如果该标志切换为 false，则子组件将被销毁并完全从 DOM 中删除。之后，您可以再次将其设置为 true 以创建一个新实例(如果我没记错的话)。

给定代码中的问题以及需要使用 setTimeout 的解决方法方法是 Angular 需要知道变化才能对它们使用react。在这种情况下，两行代码中的切换可能太快了，以至于 Angular 甚至无法掌握更改(或者编译器甚至根本删除了第一行，所以什么都没有改变，但不确定)，因此组件既不会被删除，也不会创建新实例。

reloadTree(){
  this.enabled = false; // switching to false
  this.enabled = true; // and back to true 
  // this does not notify angular that something has actually changed
}

我们需要做的是手动告诉 Angular 一个值已经改变。这可以通过 Angular 来完成 ChangeDetectionRef类，可以注入(inject)到组件中。在切换 enabled 之间标志，我们通知 Angular 来查找更改，因此它可以通过完全删除组件来对此使用react。然后我们可以将其设置回 true 以创建一个新实例。

constructor(private changeDetector: ChangeDetectorRef){}

reloadTree(){
    this.enabled = false;
    // now notify angular to check for updates
    this.changeDetector.detectChanges();
    // change detection should remove the component now
    // then we can enable it again to create a new instance
    this.enabled = true; 
}