时间戳

首页 > 解决方案 > 如何在 ngx-admin 模板中使组件全屏显示？

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

问题描述

我一直在尝试使我的新登录页面组件在 ngx-admin 模板中全屏显示。每当我尝试显示登录组件时，它都会进入带有侧面导航的模板。我在 pages 模块中创建了这个登录组件。请帮我把它转换成全屏。

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 {
}

标签： typescriptangular8

解决方案

要更改登录组件，您需要将NbLoginComponentroutes 数组中的条目替换为您的自定义LoginComponent.

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

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

有关分步说明，请参阅自定义身份验证组件指南。

推荐阅读