angular中的嵌套路由 7、使用模块和懒加载

Question

我在创建 angular 路线时遇到问题。我已经实现了功能模块，并且正在为每个模块使用路由。我希望路由从应用程序到布局再到仪表板，然后再到帐户。路由未正确创建，似乎正在跳过仪表板，路由直接转到帐户。这是我使用 Augury 调试路由时的样子。

这是我的每条路线的代码。每条路线都在自己的模块中。我真的很想将路线分开放置在模块中。任何建议将不胜感激。

//app routes

const appRoutes: Routes = [
  { path: "login", component: LoginComponent },
  {
    path: "",
    canActivate: [AuthGaurdService],
    loadChildren: "./layouts/layouts.module#LayoutsModule"
  },
  { path: "**", component: PageNotFoundComponent }
];

//layout routes


const LayoutRoutes: Routes = [
  {
    path: "",
    component: LayoutsComponent,
    canActivate: [AuthGaurdService],
    children: [
      {
        path: "",
        canActivateChild: [AuthGaurdService],
        children: [
          {
            path: "account-information",
            loadChildren: "../account-information/account-information.module#AccountInformationModule"
          },
          {
            path: "",
            loadChildren: "../dashboard/dashboard.module#DashboardModule"
          },
        ]
      }
      
    ]
  }
];

//dashboard routes


const routes: Routes = [
  {
    path: "",
    component: DashboardComponent,
    canActivate: [AuthGaurdService],
    children: [{
      path: "",
      canActivateChild: [AuthGaurdService],
      children: [
        {
          path: "accounts",
          loadChildren: "./accounts/accounts.module#AccountsModule"
        },
        {
          path: "",
          component: HomeComponent
        }
      ]
    }]
  }
];


//account routes

const AccountsRoutes: Routes = [
  {
    path: "accounts",
    component: AccountsComponent,
    canActivate: [AuthGaurdService],
    children: [
      {
        path: "",
        canActivateChild: [AuthGaurdService],
        children: [
          { path: "transactions", component: TransactionsComponent },
          { path: "summary", component: SummaryComponent },
          { path: "earnings", component: EarningsComponent }
        ]
      }

    ]
  }
];

<!--app.html -->
<router-outlet></router-outlet>

<!-- layout.html -->
<div class="page-container">
  <app-navbar></app-navbar>
  <div class="page-content-wrapper ">
    <div class="content">
      <router-outlet></router-outlet>
    </div>
    <div class="container-fluid container-fixed-lg footer">
      <app-footer></app-footer>
    </div>
  </div>
</div>

<!-- dashboard.html -->
<div class="page-container">
  <app-navbar></app-navbar>
  <div class="page-content-wrapper ">
    <div class="content">
      <router-outlet></router-outlet>
    </div>
    <div class="container-fluid container-fixed-lg footer">
      <app-footer></app-footer>
    </div>
  </div>
</div>


<!-- accounts -->
<router-outlet></router-outlet>

这是我回家后页面的样子

这是 accounts/summary

我的侧边菜单是这样的 let retail: Array<Menu> = [ { name: "Home", router_link: "", submenu: [], toggle_submenu: false, icon: "" }, { name: "Accounts", router_link: "accounts/summary", toggle_submenu: false, icon: "", submenu: [ { name: "Summary", router_link: "accounts/summary", toggle_submenu: false, icon: "", submenu: [] }, { name: "Tansactions", router_link: "accounts/transactions", toggle_submenu: false, icon: "", submenu: [] }, { name: "Earnings", router_link: "accounts/earnings", toggle_submenu: false, icon: "", submenu: [] } ] }, { name: "Sales", router_link: "sales", toggle_submenu: false, icon: "", submenu: [] }, { name: "Inventory", router_link: "inventory", toggle_submenu: false, icon: "", submenu: [] }, { name: "Upload", router_link: "upload", toggle_submenu: false, icon: "", submenu: [] } ];

Answer 1

由于我没有看到您的完整代码，我猜测您无法正确导航到您的路线。

当你使用惰性加载模块时，你不需要在子路由中提供前缀。例如在你的 AppModule:

{
    path: '', component: HomeComponent
    },
   {path: 'dashboard',
    loadChildren: './dashboard/dashboard.module#DashboardModule' 
  }

在你的 DashboardModule

{
    path: '', component: DashboardComponent,
  },{
    path: 'accounts',
    loadChildren: '../accounts/accounts.module#AccountsModule' 
  }

然后为了去你dashboard.component.html中的路线你会写

<a [routerLink]="['accounts']"> Account</a>

而不是

<a [routerLink]="['/dashboard', 'accounts']"> Account</a>

因为在子延迟加载模块中，根路径从加载它的父模块开始。

我创建了一个具有类似场景的 stackblitz demo。

希望对您有所帮助。

Answer 2

你好朋友，我发现了这个问题。我删除了仪表板模块中帐户模块的导入。这确保了当生成的帐户路由放置在仪表板之后的路由时。这是因为我懒加载模块。这是我的路线之后的样子 This is what my routes looked like after

还要确保在子路由中添加 /，因此 angular 将此路由附加到其父路由，即帐户摘要路由器 link 在我的侧边栏中看起来像这样 '/accounts/summary '.

其他一切都保持不变。现在我的帐户摘要组件被放置在我的仪表板路由器 link 内，并且我显示在我的侧边栏旁边

angular中的嵌套路由 7、使用模块和懒加载

Nested routing in angular 7, using modules and lazy loading

angular-routing

angular

angular-router