Блог

Главная - Вопросы по программированию - ngx-администратор / nebular как создать страницу вне модуля страниц?

ngx-администратор / nebular как создать страницу вне модуля страниц?

#angular #nebular #ngx-admin

Вопрос:

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

ng g m печать —печать маршрута —приложение модуля.модуль

внутренние маршруты

 export const routes: Routes = [
  {
    path: 'pages',
    loadChildren: () => import('./pages/pages.module')
      .then(m => m.PagesModule),
  },
  { path: '', redirectTo: 'pages', pathMatch: 'full' },
  { path: 'print', loadChildren: () => import('./print/print.module').then(m => m.PrintModule) },
  { path: '**', redirectTo: 'pages' },
];

на страницах-меню.ts

 export const MENU_ITEMS: NbMenuItem[] = [
  {
    title: 'E-commerce',
    icon: 'shopping-cart-outline',
    link: '/pages/dashboard',
    home: true,
  },
  {
    title: 'Print',
    link: '/print'
  },.....// the original menu in here

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

Я следую инструкции, приведенной здесь https://akveo.github.io/nebular/docs/auth/custom-auth-components#related-articles но это тоже не работает.

Я использую angular 11 для этого проекта и последнюю версию ngx-admin

Комментарии:

1. Для этого вам нужно создать новый макет. Макет по умолчанию имеет верхний и нижний колонтитулы. Вы можете видеть, как он вводится под @themelayouts . Проверка здесь может помочь.

Ответ №1:

Вы должны создать PrintRoutingModule Print папку on, а затем импортировать этот файл в PrintModule .

print-routing.module.ts 

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

const config: ExtraOptions = {
  useHash: false,
  relativeLinkResolution: 'legacy'
}

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

это работает для меня, или вы можете изменить

{ path: 'print', loadChildren: () => import('./print/print.module').then(m => m.PrintModule) },

Для

   {
    path: 'print',
    component: PrintComponent,
  },

оба производят одно и то же

Комментарии:

1. Это не работает. Я поступил так же, как и ты.

2. можете ли вы сделать минимальное воспроизведение, используя stackblitz?

Ответ №2:

  1. Создайте модуль и компонент печати вне модуля страницы

печать ng g m —маршрутизация=истинная
печать ng g c —встроенный шаблон=истинный —пропуски тестов=истинный —встроенный стиль=истинный

  1. внутри print.component.ts сделайте это
 import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'ngx-print',
  template: `
      <router-outlet></router-outlet>
  `,
  styles: [
  ]
})
export class PrintComponent implements OnInit {   
  constructor() { }    
  ngOnInit(): void {
  }    
}
  1. На app-routing.module.ts добавить:

{ путь: ‘печать’, loadChildren: () => импорт(‘./print/print.module’).затем( m =>> m.PrintМодуль) },

  1. Теперь попробуйте получить доступ к нему из /печать/ он должен загрузить вашу пустую страницу без каких-либо компонентов макета.
Метки: