Question

我一直试图在ngx-admin模板中将我的新登录页面组件显示为全屏。每当我尝试显示登录组件时，它都会通过侧面导航进入模板的内部。我在页面模块中创建了此登录组件。请帮助我将其转换为全屏。

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

import { NgModule } from '@angular/core';

    import {
      NbAuthComponent,
      NbLoginComponent,
      NbLogoutComponent,
      NbRegisterComponent,
      NbRequestPasswordComponent,
      NbResetPasswordComponent,
    } from '@nebular/auth';

import { LoginComponent } from './login/login.component';

const routes: Routes = [
  {path : '' , component: LoginComponent},
  { path: 'pages', loadChildren: 'app/pages/pages.module#PagesModule' },
   {
      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: 'login', pathMatch: 'full' },
  { path: '**', redirectTo: 'pages' },
];

const config: ExtraOptions = {
  useHash: true,
};

@NgModule({
  imports: [RouterModule.forRoot(routes, config)],
  exports: [RouterModule],
})
export class AppRoutingModule {
}

Answer 1

要更改登录组件，您需要用自定义NbLoginComponent替换routes数组中的LoginComponent个条目。

还要从路由数组中删除{path : '' , component: LoginComponent},和{ path: '', redirectTo: 'login', pathMatch: 'full' },。

如果您还需要修改身份验证组件的通用包装（带有后退按钮的卡片），则可以修改NbAuthComponent模板。

有关逐步说明，请参见custom auth components guide。

如何在ngx-admin模板中使组件全屏显示？

1 个答案: