Вложенная маршрутизация в angular 7 с использованием модулей и отложенной загрузки

Question

У меня проблемы с созданием угловых маршрутов.Я реализовал функциональные модули и использую маршрутизацию для каждого из этих модулей.Я хочу, чтобы маршруты переходили из приложения в макет, на панель инструментов, а затем в учетные записи.Маршрут не создан должным образом, кажется, что панель мониторинга пропускается, и маршрут идет непосредственно к учетным записям.Вот как это выглядит, когда я использую 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>

вот так выглядит моя страница, когда я возвращаюсь домой

это для аккаунтов /резюме

и мое боковое меню выглядит следующим образом 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

Здравствуйте, друзья, я разобрался с проблемой.Я удалил модуль импорта учетных записей в модуле панели.Это позволило убедиться, что при маршрутах, где генерируются учетные записи, маршрут размещался после приборной панели.Это потому, что я лениво загружаю модули.Так выглядели мои маршруты после Так выглядели мои маршруты после

Также обязательно добавьте / в дочерние маршруты, поэтому angular добавляет этот маршрут к своему родителю, то есть к учетным записям.итоговая ссылка на маршрутизатор выглядит так на моей боковой панели '/accounts/summary'.

Все остальное осталось прежним.Теперь мой компонент сводки учетных записей был помещен в ссылку маршрутизатора панели мониторинга, и я отобразился рядом с боковой панелью

Answer 2

Поскольку я не видел ваш полный код, я предполагаю, что вы не можете правильно перемещаться по маршрутам.

Когда вы используете лениво загруженные модули, вам не нужно указывать префикс в дочерних маршрутах. Например, в вашем 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 с похожим сценарием.

Надеюсь, это поможет.