我正在自定义 ngx-admin 模板,我试图在应用程序模块中添加新模块。并在 app-routing.module.ts 中添加其路由。但当我尝试打开它时它不起作用。加载时卡住了。 控制台也没有错误。所以我不明白可能是什么问题。
我已将此 SignModule 添加到外部页面,而不是内部页面
应用程序路由.module.ts
import { ExtraOptions, RouterModule, Routes } from "@angular/router";
import { NgModule } from "@angular/core";
import {
NbAuthComponent,
NbLoginComponent,
NbRegisterComponent,
NbLogoutComponent,
NbRequestPasswordComponent,
NbResetPasswordComponent,
} from "@nebular/auth";
const routes: Routes = [
{
path: "pages",
loadChildren: () =>
import("../app/pages/pages.module").then(m => m.PagesModule),
},
//Newly added Module
{
path: "sign",
loadChildren: () =>
import("../app/sign/sign.module").then(m => m.SignModule),
},
{
path: "auth",
component: NbAuthComponent,
children: [
{
path: "",
component: NbLoginComponent
},
{
path: "login",
component: NbLoginComponent
},
{
path: "register",
component: NbRegisterComponent
},
{
path: "logout",
component: NbLogoutComponent
},
{
path: "request-password",
component: NbRequestPasswordComponent,
},
{
path: "reset-password",
component: NbResetPasswordComponent,
},
],
},
{ path: "", redirectTo: "sign", pathMatch: "full" },
{ path: "**", redirectTo: "pages" },
];
const config: ExtraOptions = {
useHash: false,
enableTracing: true,
};
@NgModule({
imports: [RouterModule.forRoot(routes, config)],
exports: [RouterModule],
})
export class AppRoutingModule {}
这是我添加的新模块。签名模块
sign.module.ts 文件
import { NgModule } from '@angular/core';
import { ThemeModule } from '../@theme/theme.module';
import { SignComponent } from './sign.component';
import { SigninModule } from './signin/signin.module';
import { SignupModule } from './signup/signup.module';
import { SignRoutingModule } from './sign-routing.module';
@NgModule({
imports: [
SignRoutingModule,
ThemeModule,
SigninModule,
SignupModule,
],
declarations: [SignComponent],
})
export class SignModule { }
sign-routing.module.ts
import { NgModule, } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { SigninComponent } from './signin/signin.component';
import { SignupComponent } from './signup/signup.component';
import { SignComponent } from './sign.component';
const routes: Routes = [
{
path: '',
component: SignComponent,
children: [
{
path: 'signin',
component: SigninComponent
},
{
path: 'signup',
component: SignupComponent
},
{
path: '',
redirectTo: 'signin',
pathMatch: 'full',
}
]
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class SignRoutingModule { }
最佳答案
这是因为 ngx-admin 使用的星云主题。仅显示那些包含在 nb-layout
包裹在nb-layout
下的页面的微调器。因此,它会跳过显示您添加的页面/组件。
正确的做法是
<nb-layout>
<nb-layout-column>
// Your content
</nb-layout-column>
</nb-layout>
关于angular - 在 app-routing.module.ts 中添加了新路由 - ngxAdmin 不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61078870/