当我们移动到角度6中的另一个组件时,如何销毁一个组件?

时间:2019-05-17 02:40:58

标签: 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 { }

2 个答案:

答案 0 :(得分:1)

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

确保将其放在ngOndestroy方法中

export class YourComponent  {

  constructor(private elementRef: ElementRef) {

  }

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

更新:

使用路由器后,您需要像这样更改路由器顺序

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

答案 1 :(得分:0)

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


p1 + p2 & 
  scale_color_gradientn(colours = colorRampPalette(rev(brewer.pal(n = 11, 
                                                                  name = "Spectral")))(50), 
                        limits = c(-10,30))