Angular2 在 onDestroy 之前分离 View ？

Question

在 Angular2 中是否有可能在组件被销毁之前得到通知!？即当它即将被销毁时。

我有一个容器组件，它在其子组件之一上保存一个 ViewContainerRef，用于动态加载 View 。如果容器组件本身被销毁(在我的例子中是由于父组件中的 *ngFor 指令)，我想分离当前加载到 ViewContainerRef 中的 View 并将其再次附加到另一个容器上。

事情是:在 ngOnDestroy() 生命周期 Hook 中，ViewContainerRef 已经被清除，因此所有 View 都被销毁，没有任何东西可以分离了。

Answer 1

我现在的解决方案(不是真正的解决方法)是实现使用 ngFor 指令的父组件的 ngOnChanges()。如果由 ngFor 迭代的数组已经改变并且它的长度比以前更短，我只需分离所有容器的 View (@ViewChildren 容器:QueryList)并将它们映射到容器(Map)。然后，我在 containers.changed 监听器中迭代新容器列表并从 map 加载 ViewRef，再次重新插入映射 View 。

@Component({
 selector: 'container-collection',
 directives: [Container],
 template: `<container *ngFor="let i of views"></container>`
})
export class ContainerCollection {
 public views = [];

 @ViewChildren(Container) private containers: QueryList<Container>;

 private viewMap = new Map<Container, ViewRef>();

 public ngOnChanges(changes: {[key: string]: SimpleChange]}): void {
  if(changes['views']) {
   //detach all views and remember which container had which view
   this.viewMap = new Map<Container, ViewRef>();

   this.containers.forEach(container => {
    var view = container.viewContainer.detach();
    if(view)
     this.viewMap.set(container, view);
   });
  }
 }

 public ngAfterViewInit(): void {
  //insert the views again (into the appropriate containers)
  this.containers.changes.subscribe( () => {
   this.containers.forEach(container => {
    var view = this.viewMap.get(container);
    if(view)
     container.viewContainer.insert(view);
   });
  });
 }
}

@Component({
 selector: 'container',
 template: `<div #viewContainer></div>`
})
export class Container {
 @ViewChild('viewContainer') public viewContainer;
}

该代码只是草稿，可能包含语法错误。但是这个想法(对我有用)应该很清楚。

Angular2 团队最好添加一个 LifeCycle Hook ，该 Hook 在组件实际销毁之前被调用。 (例如 ngBeforeDestroy() )左右。