Question

我在创建角度路线时遇到麻烦。我已经实现了功能模块，并且正在为每个这些模块使用路由。我希望路线从应用程序到布局再到仪表板，再到客户。路由创建不正确，似乎仪表板已被跳过，路由直接进入了帐户。这是我使用augory调试路由时的外观。

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

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body style="background-color: red">
     <a href="/iframe1" style="color: #fff">GO TO Iframe 1</a>
  </body>
</html>

//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 }
        ]
      }

    ]
  }
];

这是我回家时页面的外观

这是帐户/摘要的

我的侧边菜单看起来像这样  <router-outlet></router-outlet>  <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>  <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>  <router-outlet></router-outlet>

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

还请确保在子路由中添加/，以便将此路由附加到其父路由，即帐户摘要routerlink在我的侧边栏'/ accounts / summary'中看起来像这样。

其他所有内容保持不变。现在，我的帐户摘要组件被放置在仪表板路由器链接的内部，并显示在侧边栏旁边

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

2 个答案: