如何销毁父组件内的子组件

Posted 2023-03-13

【中文标题】如何销毁父组件内的子组件

【英文标题】：How to destroy a child component inside a parent component

【发布时间】：2019-03-16 01:16:15

【问题描述】：

我正在使用 Angular 2 +

父组件

搜索结果组件

此组件显示产品列表作为搜索结果。

模板.html：

<div [routerLink]="['product/'+item.id]" ></div>
<!--When user click this DOM, the child component(ProductDetailComponent) will be loaded and navigated..  -->

<router-outlet></router-outlet>

子组件

产品细节组件

我想要做的是当用户点击div时，如果加载了现有的子组件，则现有的子组件将被销毁，并且可以重新创建一个新的子组件。

Angular 问题：路由器仅在导航到不同的路由时才销毁并重新创建组件。 当仅更新路由参数或查询参数但路由相同时，不会销毁和重新创建组件。要解决它，这是解决方案。 Router Navigate does not call ngOnInit when same page。但是解决方案并没有完全解决问题，几乎没有错误。

activeRouter.params.subscribe(val=>
   //move the code from ngOnInit to here

)

How to call ngOnInit() again in angular2

我的问题是，当用户点击父组件中的按钮时，如何在重新加载子组件之前完全销毁子组件？

到目前为止，我在父组件中尝试过的内容如下，但是 总是得到类型错误：this.component 未定义。因为子组件只在路由改变时才加载。

组件：ComponentRef;

checkingChildCom()

   if(this.component)
       this.component.destroy();
   

【问题讨论】：

试试这个：angular.io/guide/dynamic-component-loader

@Pal Singh 感谢您的建议。但是我们的应用路由逻辑很难改变。当路由发生变化并匹配到 path: 'product/:id' 时加载子组件，然后加载子组件。

【参考方案1】：

在组件上使用 ngIf

<component-selector *ngIf="someCondition"></component-selector>

当你想销毁它时，将 someCondition 设置为 false。

【参考方案2】：

经过研究，我发现解决问题的最佳方法是

下标来观察路由参数的变化，不需要破坏 ProductDetailComponent。

private activeRouter: ActivatedRoute,
ngOnInit() 
  this.activeRouter.paramMap.subscribe(param =>
    //put codes here
  );