在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>

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

我知道我可能肯定做了一些可怕的错误导致了这一点，但我无法找到它。虽然我明白你们很难在没有我发布整个问题的情况下确定问题（这是一个安静的项目），但我需要的只是我能看到的一点，调试这个问题的任何帮助都将真的很感激。还有一件事，如果我删除这个模块：BrowserAnimationsModule，它开始工作正常。但我真的需要这个模块来使我的角度素材动画工作。有帮助吗？谢谢你的阅读。

Answer 1

我正在写此答案，以便对像我这样的人有所帮助。

我在Angular框架上使用离子。爱奥尼亚语有nearup betanet --nodocker --binary-path nearcore/target/release 。当我尝试在页面之间路由时，angular并没有破坏组件。为此，我不得不使用pages而不是ionViewWillEnter。

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

如果您使用其他框架，请仔细阅读文档。

Answer 2

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

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

您可以在github上查看问题说明： https://github.com/angular/angular/issues/19093