首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >angular 7中的嵌套路由,使用模块和延迟加载

angular 7中的嵌套路由,使用模块和延迟加载
EN

Stack Overflow用户
提问于 2019-05-26 16:06:01
回答 1查看 1.9K关注 0票数 2

我在创建角度路由时遇到了问题。我已经实现了功能模块,并且我正在为每个模块使用路由。我希望路由从应用程序到布局,仪表板,然后到帐户。路由未正确创建,似乎正在跳过仪表板,路由直接转到帐户。下面是我使用augury调试路由时的结果。

下面是我为每条路线编写的代码。每条路由都在自己的模块中。我真的希望将路由分开放在模块中。任何建议都将不胜感激。

代码语言:javascript
复制
//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 }
        ]
      }

    ]
  }
];
代码语言:javascript
复制
<!--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>

这是我回家时的页面

这是针对帐户/摘要的

我的侧边菜单看起来像这个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: [] } ];

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-05-27 00:47:04

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

另外,确保在子路由中添加/,因此angular会将此路由附加到其父路由,即帐户摘要路由器链接在我的侧边栏'/ accounts / summary‘中如下所示。

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

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/56311772

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档