ngx-admin / nebular 如何在页面模块之外创建页面？

Question

我只是在试验 ngx-admin，我想创建一个没有页眉和页脚的页面， 所以我用

创建了一个模块

ng g m print --route print --module app.module

内部路线

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' },
];

在 pages-menu.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

Answer 1

您应该在Print 文件夹上创建PrintRoutingModule，然后将该文件导入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,
  },

两者都产生相同的东西

Answer 2

1. 在页面模块之外创建打印模块和组件

ng g m print --routing=true
ng g c print --inline-template=true --skip-tests=true --inline-style=true

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: () => import('./print/print.module').then( m => m.PrintModule) },

4. 现在尝试从 /print/ 访问它 它应该加载没有任何布局组件的空页面。