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是否打算以这种方式发生，但是确实如此。 只是从经验上讲。