web-dev-qa-db-ja.com

ログインをカスタマイズする方法は？

angular4 を使用しています。 ngx-admin のログインページをカスタマイズしたい。解決策はありますか？または、既存のログインページをカスタマイズする代わりに、 ngx-admin に新しいログインページを作成することをお勧めします。

angularngx-admin
4
vinu prasad

以下の変更を行って、ngx-adminの既存のauth-pages/componentsをカスタマイズ/拡張できます（npm依存関係なし）

  1. すべてのソースファイルを https://github.com/akveo/nebular/tree/master/src/framework/auth から 'theme/components/auth'にコピーします

  2. core.module.ts

    import {NbAuthModule、NbDummyAuthProvider} from '../@ theme/components/auth'; // '@ nebular/auth';

  3. app-routing.module.ts

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

  4. theme.module.ts

    import {NbAuthModule} from './ components/auth/auth.module'; import {NbEmailPassAuthProvider} from './ components/auth/providers/email-pass-auth.provider';

    NbAuthModule.forRoot（{プロバイダー：{電子メール：{サービス：NbEmailPassAuthProvider、構成：{}、}}}）。プロバイダー、

参照 https://github.com/akveo/nebular/issues/37

8
Manoj VS

カスタマイズが非常に簡単なため、Ngx-adminの既存のログインページを使用することをお勧めします。 endpointを設定するだけで設定できます。また、ngx-adminドキュメントからソースコードをコピーして既存のコードを変更することもできます。

1
fiza khan

ログインページのカスタマイズを使用するには、次の手順を実行する必要があります。

注：

Pagesフォルダ内にログインコンポーネントを作成しました。

enter image description here

バージョン

グローバル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,
],

結果

enter image description here

1
TAHA SULTAN TEMURI