Javascript 如何销毁父组件中的子组件

我用的是角度2+

父组件

searchResultComponent

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

template.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>

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

• 到目前为止，我在父组件中尝试的内容如下，但是 始终获取类型错误：此.component未定义。因为子组件仅在管线更改时加载
  组件：ComponentRef
  checkingChildCom（）{
  }

---

在组件上使用ngIf

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

---

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

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

下标以监视路由参数的更改，而不需要销毁ProductDetailComponent

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

---

试试这个：@Pal Singh谢谢你的建议。但我们的应用程序路线逻辑很难改变。当路由更改并与路径“product/：id”匹配时，将加载子组件，然后将加载子组件。

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

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