[英]How to destroy a component when we move to another component in angular 6?
在角度 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 { }
您可以使用 nativeElement.remove() 方法物理删除元素。 因此,您的代码可能如下所示:
确保将其放入 ngOndestroy 方法中
export class YourComponent {
constructor(private elementRef: ElementRef) {
}
ngOndestroy() {
this.elementRef.nativeElement.remove();
}
}
更新:
由于您使用路由器,因此您需要像这样更改路由器顺序
{path: '', component: HomepageComponent }
{path: 'ide',component: OnlineideComponent},
您可以使用 HostListener,它会在卸载该页面时删除/清除组件。
@HostListener('unloaded')
ngOnDestroy() {
console.log('Cleared');
}
这就是我为使它工作所做的。
使用routerLink
和<router-outlet></router-outlet>
。 你可以做这样的事情。
<button mat-flat-button color="primary" routerLink="/login">Login</button>
<button mat-flat-button color="primary" routerLink="/signup">Signup</button>
<router-outlet></router-outlet>
您的组件将显示在<router-outlet></router-outlet>
位置,它们将破坏以前的组件。 [来源]
想法:我相信这种路由方式是因为单页应用程序的“性质”。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.