销毁和重新加载子组件

Question

我需要能够完全重新加载子组件。似乎实现这一点的最佳方法是使用带有布尔值的简单*ngIf；设置为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 甚至无法掌握更改（或者编译器甚至根本删除了第一行，所以什么都没有改变，但不确定），因此组件既不会被移除，也不会创建新的实例。

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 一个值发生了变化。这可以通过 angulars ChangeDetectionRef 类来完成，该类可以注入到组件中。在切换enabled 标志之间，我们通知 Angular 以查找更改，因此它可以通过完全删除组件来对此做出反应。然后我们可以将其设置回 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; 
}

Answer 2

问题是你为什么要销毁组件，我认为这是错误的做法，将需要重新加载的数据放入服务并通过 RxJS 订阅者或 EventEmitter 通知组件发生了变化，其他组件可以通过将服务注入构造函数并调用触发方法来触发更新事件。