Question

我正在使用angular4。我想在ngx-admin中自定义登录页面。有什么解决方案吗？或者最好在ngx-admin中创建一个新的登录页面，而不是自定义现有页面。

Answer 1

根据this link和this issue 可以进行以下更改来自定义/扩展ngx-admin中现有的auth-pages / components（没有npm依赖）

首先将所有源文件从this repository folder复制到您项目的'theme/components/auth'

core.module.ts

更改了以下导入：

import { NbAuthModule, NbDummyAuthStrategy } from '@nebular/auth';

到

import { NbAuthModule, NbDummyAuthStrategy } from '../@theme/components/auth'; // '@nebular/auth';

app-routing.module.ts

更改了以下导入

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

到

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

4.在文件theme.module.ts中添加以下导入

// this line in import part of the file
import {NbAuthModule} from './components/auth';
import {NbPasswordAuthStrategy} from "./components/auth/strategies";

// inside of const NB_THEME_PROVIDERS
NbAuthModule.forRoot({
  providers: {
    email: {
      service: NbPasswordAuthStrategy,
      config: {},
    }
  }
}).providers,

参考文献

Answer 2

我建议您使用Ngx-admin现有登录页面，因为它很容易自定义。您只需通过设置端点进行设置，也可以通过复制ngx-admin文档中的源代码来修改现有文件。

Answer 3

要使用自定义登录页面，您只需执行以下步骤。

注意：

我已经在页面文件夹中创建了登录组件。

版本

您的全局Angular CLI版本（8.3.9）大于本地版本版本（8.0.2）。使用本地Angular CLI版本。

第1步

在 app-routing.module.ts

中用您的组件名称替换路由组件

 path: 'auth',
component: NbAuthComponent,
children: [
  {
    path: '',
    component: LoginComponent,
  },
  {
    path: 'login',
    component: LoginComponent,
  },

第2步

在 theme.modules.ts

中导入组件

位于/ src / app / @ theme内

 import {LoginComponent} from '../../app/pages/login/login.component'
 const COMPONENTS = [
 HeaderComponent,
 FooterComponent,
 SearchInputComponent,
 TinyMCEComponent,
 OneColumnLayoutComponent,
 ThreeColumnsLayoutComponent,
 TwoColumnsLayoutComponent,
 LoginComponent   // HERE
];

第3步

将组件放入 pages.module.ts

的声明中

declarations: [
PagesComponent,
LoginComponent,
],

结果

如何自定义登录？

3 个答案: