Question

我正在使用Angular 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>

子组件

ProductDetailComponent

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

角度问题：路由器仅在导航到其他路线时销毁并重新创建组件。如果仅更新路由参数或查询参数，但路由相同，则不会销毁并重新创建组件。要解决此问题，这是解决方案。 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是未定义的。因为子组件仅在路线更改时加载。

component：ComponentRef;

checkingChildCom（）{
```
   if(this.component){
       this.component.destroy();
   }
```
}

Answer 1

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

下标可以观察路线参数的变化，而无需破坏ProductDetailComponent。

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

Answer 2

在组件上使用ngIf

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

并在要销毁someCondition时将其设置为false。

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

2 个答案: