javascript - 当我们移动到 Angular 6 中的另一个组件时，如何销毁一个组件？

Question

在 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 { }

Answer 1

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

确保将其放入 ngOndestroy 方法中

export class YourComponent  {

  constructor(private elementRef: ElementRef) {

  }

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

更新:

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

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