角度2路由意外行为

Question

我正在使用Angular 2路由进行练习，并能够在Angular-2中创建和运行该项目。 当我运行应用程序时，如果使用2层路由，它工作正常。 但是当我将路由层增加到3时，它会出现意外情况。

我正在加载应用程序的一个app模块。 然后我为其他人创建了用于登录，注册和baselayout的单独模块。 登录后我想使用基本布局作为我的应用程序布局，并希望在baselayout中加载所有内容，以便页眉和页脚可以保持一致。

并且我为每个功能创建了单独的模块，如DivisionModule，OrganizationModule，我想在baselayout模块中加载这两个模块，但是当我加载DivisionModule的任何组件时，它直接加载到applay模块中，而不是在baselayout中。

这是我项目的git url。

https://github.com/sushilraj786/Angular.git

当我访问登录或注册时，它可以正常工作，但当我尝试访问app / Organization / edit或app / organization / list或app / division / edit或app / division / list时，它会在app模块下加载，而不是在baseLayout模块下。

任何帮助都将不胜感激。

由于 苏希尔

Answer 1

这是因为您的app.component.html中只有一个<router-outlet></router-outlet>。 尝试在base-layout.component.html

中添加一个

Angular路由将查看您的最后一个路由器插座，以通过路由加载模板调用。 （我也看到你只使用了懒人装载，为什么？这是你的运动的意思吗？

编辑：

由于你使用延迟加载模块，你的路由文件（在你的懒惰模块中）不应该定义根路径：

示例：

const routes: Routes = [
    {
    path: '',
     component: IndexComponent,
    children: [
      {
        path: '',
        component: BaseLayoutComponent
      },
      {
        path: 'organization', loadChildren: 'app/organization/organization.module#OrganizationModule'
      },
      {
        path: 'division', loadChildren: 'app/division/division.module#DivisionModule'
      }
    ]
   }
];