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

Question

以前用Angular2可以正常使用，升级到Angular4后就不能用了。

这是我的路由：

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 材质动画正常工作。有什么帮助吗？感谢阅读。

Answer 1

嗯，考虑到你原来的问题，你可能没有提供足够的信息来分析问题的根源。

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

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

Answer 2

我写这个答案是为了帮助像我这样的人。

我在 Angular 框架上使用 ionic。 Ionic 有 pages。当我尝试在页面之间路由时，angular 没有破坏组件。为此我不得不使用 ionViewWillEnter 而不是 ngOnInit().

如果您使用 Ionic，请检查此 link ion-router-outlet

如果您使用任何其他框架，请务必查看文档。

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

Routing Issue in Angular 4, not destroying previous components

angular

routing

angular-ui-router