Angular2路由器不替换组件

Question

当我使用router.navigate ['some-route']时,新路由的组件将添加到旧路由的组件之上,而不是替换它:

当前路由是登录页面:

登录后我通过执行以下操作导航到我的主页面:

this.router.navigate(['/form-builder']);

,但它的组件只是添加到登录组件的顶部而不替换它:

根组件模板:

<router-outlet></router-outlet>

路由配置:

const routes: Routes = [
    { path: '', redirectTo: 'form-builder', pathMatch: 'full' },
    { path: 'form-builder', component: FormEditorComponent, canActivate: [AuthGuard] },
    { path: 'login', component: LoginComponent },
    { path: 'signup', component: SignupComponent },
];

我究竟做错了什么？

Answer 1

当您看到在当前组件的TOP上添加组件时,通常意味着抛出了一些错误.检查您的开发控制台,并告诉我们您在导航时是否遇到一些错误.如果有,每次你在其他地方导航时,它应该继续堆叠组件在彼此之上.

不,我不确定为什么,或者Angular是否意味着以这种方式发生,但确实如此.只是从经验来讲.