当我们移动到角度 6 中的另一个组件时，如何销毁一个组件？答案

【问题标题】：How to destroy a component when we move to another component in angular 6?当我们移动到角度 6 中的另一个组件时，如何销毁一个组件？
【发布时间】：2019-10-04 08:11:00
【问题描述】：

在 Angular 6 中，让我们有三个分量 x,y,z 。我现在在 x 组件。但是当我转到组件 y 并返回到 x 时，DOM 中仍然存在之前的 x 组件。但是我想删除 x 的前一个实例。这意味着我在 DOM 中一次只需要一个组件的实例。如何做到这一点？

我的路由器配置部分：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { OnlineideComponent} from './onlineide/onlineide.component';
import {HomepageComponent} from './homepage/homepage.component';

const routes: Routes = [
  {path: 'ide',component: OnlineideComponent},
  {path: '', component:  HomepageComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

【问题讨论】：

你怎么知道组件的前一个实例存在于 DOM 中？只要您不使用类似 display: none 的技巧，通过将组件包含在同一个父组件中并有条件地隐藏一个或其他组件来隐藏 DOM 中的组件。即如果路由从 X 更改为 Y 以及从 Y 更改为 X，X 组件将被销毁并重新创建。您可以在 stackblitz 上为您的问题创建一个演示，以便我们调试问题吗？
这听起来很奇怪，如果您设置正确，它应该已经发生了。您能否更具体地了解您自己代码中的组件并展示它们的设置方式

标签： javascript node.js angular typescript ecmascript-6

【解决方案1】：

您可以使用 nativeElement.remove() 方法物理删除元素。所以你的代码可能如下所示：

确保将其放入 ngOndestroy 方法中

export class YourComponent  {

  constructor(private elementRef: ElementRef) {

  }

  ngOndestroy() {
    this.elementRef.nativeElement.remove();
  }
}

更新：

由于您使用路由器，因此您需要像这样更改路由器顺序

  {path: '', component:  HomepageComponent }
  {path: 'ide',component: OnlineideComponent},

【讨论】：

@mahbubcseju 你是如何创建组件的？您是动态创建组件还是仅使用路由器在组件之间导航
使用路由器在组件之间导航。
那么组件应该被自己删除。你能告诉我路由器配置吗
{ path: 'my/path/', component: MyComponent } 这样吗？其实我没弄明白哪个是路由器配置。
请上传您问题中的路由器配置代码。我认为主要问题来自您的路由器配置

【解决方案2】：

您可以使用 HostListener，它会在卸载该页面时删除/清除组件。

@HostListener('unloaded')
ngOnDestroy() {
    console.log('Cleared');
}

【讨论】：