angular - Angular 4 中的路由问题，没有破坏以前的组件

Question

它以前在 Angular 2 上工作得很好，在升级到 Angular 4 后，它就停止工作了。

这是我的路线:

const appRoutes: Routes = [
    { path: 'Profile/:name', component: CompanyprofileComponent },
    { path: 'Account/Login', component: LoginComponent, pathMatch: 'full' },
    { path: 'admin', component: adminLayout, canActivate: [AdminGuard], canActivateChild: [AdminGuard], children: Admin_Routes },
    // { path: 'organization', component:orgLayout,canActivate:[OrgGuard], children:Org_Routes},
    { path: '', component: userLayout, canActivate: [Guard], canActivateChild: [Guard], children: User_Routes }, //, canDeactivate: [PendingChangesGuard]
    { path: 'opr', component: OPRlayout, children: OPR_Routes },
];

export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes, { useHash: true });

这是我的 app.component 文件:

<router-outlet></router-outlet>

现在，当我加载 URL 时，说 http://localhost:4200/#/Items ，它会正确加载组件。当我加载不同的组件时，它实际上应该会破坏以前的组件并显示新组件。但它显示了用户布局的两个组成部分。请看下面的截图:

我知道我可能确实做了一些非常错误的事情导致了这种情况，但我无法找出原因。虽然我知道如果我不发布整个项目(这是一个安静的项目)，你们很难确定问题，但我需要的是一个我可以查看的点以及调试此问题的任何帮助真的很感激。还有一件事，如果我删除这个模块:BrowserAnimationsModule，它就会开始正常工作。但我真的需要这个模块来让我的 Angular Material Animations 工作。有什么帮助吗？感谢阅读。

Answer 1

嗯，考虑到您最初的问题，您似乎没有提供足够的信息来分析问题的根源。

但是，您的代码可能会抛出一些运行时错误，如果您的代码碰巧使用了 BrowserAnimationsModule，那么 Angular 可能无法用新组件替换之前的组件，而是将新组件附加到旧的。这是一个已知问题，涉​​及 Angular 4 的 BrowserAnimationsModule。您可以从代码中消除运行时错误，一切都会正常进行。

你可以在github上查看问题描述: https://github.com/angular/angular/issues/19093