Как я могу использовать роутер-розетку с ленивой нагрузкой - PullRequest
Новая
       73

Как я могу использовать роутер-розетку с ленивой нагрузкой

0 голосов
/ 27 сентября 2019

Доброе утро, я попытаюсь объяснить мою проблему.

У меня есть Angular SPA, в этом SPA я реализовал ленивую загрузку, и в одном из этих модулей я хочу создать подмодули.

Я имею в виду, что в этом SPA много страниц, и на одной из этих страниц у меня есть компонент (UserComponent), который разделяется на нескольких страницах, а не на всех страницах.

Итак, я создал модуль.Я могу получить модуль, но не могу получить подмодули. 

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { UserComponent } from './user/user.component';

export const routes: Routes = [
  // {
  //   path: '',
  //   component: UserComponent,
  //   children: [
  //     { path: '', component: AccountsMenuComponent },
  //   ]
  // },
  {
    path: '',
    component: UserComponent,
    children: [
      { path: 'accounts-menu', loadChildren: './accounts-menu/accounts-menu.module#AccountsMenuModule' }
    ]
  },
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})

export class UserRoutingModule {}

Я знаю, что могу загрузить компонент, который вы можете видеть в закомментированных строках, но если я делаю так, я загружаю каждый раз UserComponent,Я не хочу этого.

Я хочу загрузить один раз и после загрузки их дочерних модулей.

В mainModule у меня есть этот HTML-код.(user.component.html) 

<div class="section-content ">
    <ng-container zoomHeader>
        <div>
            <app-user-information-header #userSettingsHeader>
            </app-user-information-header>
        </div>
    </ng-container>


    <ng-container zoomMain>
        <div>
            <router-outlet></router-outlet>
        </div>
    </ng-container>


</div>

Я поделюсь с вами кодом account-menu-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AccountsMenuComponent } from './accounts-menu.component';

const routes: Routes = [
  {
     path: '', 
     component: AccountsMenuComponent 
    }
  ];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class AccountsMenuRoutingModule { }

А также, account-menu.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { AccountsMenuRoutingModule } from './accounts-menu-routing.module';

@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    AccountsMenuRoutingModule
  ]
})
export class AccountsMenuModule { }

Любое предложение?

...