ngx-admin / nebular 如何在页面模块之外创建页面?
ngx-admin / nebular how to create page outside pages module?
我只是在试验 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' },
];
页数-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
当我 运行 并点击打印 link 时,它只显示空白页,里面什么也没有。我仍然不知道如何在 ngx-admin
中创建自定义页面
我按照此处的说明进行操作 https://akveo.github.io/nebular/docs/auth/custom-auth-components#related-articles,但效果不佳。
我为这个项目使用 angular 11 和最新的 ngx-admin
您应该在 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,
},
两者产生相同的东西
- 在页面模块外创建打印模块和组件
ng g m print --routing=true
ng g c print --inline-template=true --skip-tests=true --inline-style=true
- 在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 {
}
}
- 在应用程序上-routing.module.ts 添加:
{
path: 'print',
loadChildren: () => import('./print/print.module').then( m => m.PrintModule) },
- 现在尝试从/print/访问它
它应该加载没有任何布局组件的空页面。
我只是在试验 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' },
];
页数-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
当我 运行 并点击打印 link 时,它只显示空白页,里面什么也没有。我仍然不知道如何在 ngx-admin
中创建自定义页面我按照此处的说明进行操作 https://akveo.github.io/nebular/docs/auth/custom-auth-components#related-articles,但效果不佳。
我为这个项目使用 angular 11 和最新的 ngx-admin
您应该在 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,
},
两者产生相同的东西
- 在页面模块外创建打印模块和组件
ng g m print --routing=true
ng g c print --inline-template=true --skip-tests=true --inline-style=true
- 在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 {
}
}
- 在应用程序上-routing.module.ts 添加:
{ path: 'print', loadChildren: () => import('./print/print.module').then( m => m.PrintModule) },
- 现在尝试从/print/访问它 它应该加载没有任何布局组件的空页面。