Отсутствует URL-адрес маршрута родительского модуля в дочернем модуле - PullRequest
Новая
       19

Отсутствует URL-адрес маршрута родительского модуля в дочернем модуле

0 голосов
/ 04 мая 2019

Новичок в Angular и попытка структурировать мой код в модулях.Я получил модуль администратора, отвечающий на запрос

/ admin

, и теперь я пытаюсь добавить еще один дочерний модуль к модулю администратора, который называется Portfolio Module.

Это работает, за исключением того, что я хочу, чтобы модуль портфолио отвечал на запрос

/ admin / portfolio

.Прямо сейчас он отвечает на

/ портфолио

запрос.

Здесь я импортирую модуль портфолио

admin.module.ts 

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AdminRoutingModule } from  './admin-routing.module';
import { IndexComponent } from './shared/index/index.component';
import {PortfolioModule} from './portfolio/portfolio.module';

@NgModule({
  declarations: [IndexComponent],
  imports: [
    CommonModule,
    PortfolioModule,
    AdminRoutingModule
  ]
})
export class AdminModule { }

Думая, что мне, возможно, нужно определить PortfolioModule как дочерний маршрут.внутри админ-маршрута.

admin-routing.module.ts 

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { IndexComponent } from './shared/index/index.component';

const routes: Routes = [
  {
    path: 'admin',
    component: IndexComponent,
    children: [
      {
        path: 'portfolio',
        /*Maybe add Portfolio Module here?*/
      }        
    ]
  }
];
@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class AdminRoutingModule { }

Вот мой модуль портфолио, ничего особенного в этом нет.

portfolio.module.ts 

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { PortfolioRoutingModule } from './portfolio-routing.module';
import { IndexComponent } from './index/index.component';
import { CreateComponent } from './create/create.component';
import { ListComponent } from './list/list.component';
import { UpdateComponent } from './update/update.component';
@NgModule({
  declarations: [IndexComponent, CreateComponent, ListComponent, UpdateComponent],
  imports: [
    CommonModule,
    PortfolioRoutingModule
  ]
})
export class PortfolioModule { }

И, наконец, вот моя маршрутизация портфеля, может быть, я что-то здесь упускаю, чтобы сказать, что она включает родительский маршрут.

portfolio-routing.module.ts 

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { IndexComponent } from './index/index.component';
import { ListComponent } from './list/list.component';
import { CreateComponent } from './create/create.component';
import { UpdateComponent } from './update/update.component';

const routes: Routes = [
  {
    path: 'portfolio',
    component: IndexComponent,
    children: [
      {
        path: 'list',
        component: ListComponent
      },
      {
        path: 'create',
        component: CreateComponent
      },
      {
        path: 'update',
        component: UpdateComponent
      }
    ]
  }
];
@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class PortfolioRoutingModule { }

1 Ответ

2 голосов
/ 05 мая 2019

При ленивой загрузке модуль, корень которого должен находиться в маршрутизации модуля, который объявляет ленивый загруженный модуль.

Например, path: 'portfolio' будет объявлено как маршрут вadmin-routing.module и ваш IndexComponent для portfolio-routing.module будет иметь пустой путь (path: '').Также атрибут children, вероятно, не является необходимым, поскольку все маршруты будут на одном уровне.

Ваша маршрутизация может выглядеть примерно так:

app-routing.module 

...
const routes: Routes = [
  {
    path: 'admin',
    loadChildren: './admin/admin.module#AdminModule'
  }
]
...

admin-routing.module 

...
const routes: Routes = [
  {
    path: '',
    component: AdminIndexComponent
  },
  {
    path: 'portfolio',
    loadChildren: './portfolio/portfolio.module#PortfolioModule'
  }
]
...

portfolio-routing.module 

...
const routes: Routes = [
  {
    path: '',
    component: PortfolioIndexComponent
  },
  {
    path: 'create',
    component: PortfolioCreateComponent
  }
]
...

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

https://stackblitz.com/edit/angular-bkxpsp

https://angular.io/guide/lazy-loading-ngmodules

...