介绍
@4geit/ngx-marketplace-account-component是一个用于angular项目的npm包，可以方便快捷地实现一个带有登录、注册、修改密码等功能的用户账户组件。
这个组件包含了多种不同的功能，比如账户信息的展示、个人信息的修改等等，可以方便的安装在你的项目中使用。同时该组件代码也经过了较高的测试及优化，保证了其稳定性和高效性。
现在让我们来看看如何在你的项目中使用该组件吧！
安装
在你的项目中使用该组件非常简单，你只需要执行以下命令即可：
npm install @4geit/ngx-marketplace-account-component
怎么用
在你的程序中引用该组件：
import { AccountModule } from '@4geit/ngx-marketplace-account-component';添加该组件到你的模块中：
-- -------------------- ---- -------
-----------
------------- -
------------
--
-------- -
--------------
-------------
--
---------- ---
---------- --------------
--
------ ----- --------- - -在你的HTML代码中加入以下内容：
<app-account></app-account>
这个时候，你会看到一个简单的账户信息组件在你的页面上展示出来。
API 介绍
Input
loginCallbackUrl: string
该值定义了用户登录成功后跳转的URL。
<app-account [loginCallbackUrl]="'/home'"></app-account>
signupCallBackUrl: string
该值定义了用户注册成功后跳转的URL：
<app-account [signupCallBackUrl]="'/home'"></app-account>
editProfileCallbackUrl: string
该值定义了个人信息修改成功后跳转的URL：
<app-account [editProfileCallbackUrl]="'/profile'"></app-account>
Output
loggedIn: EventEmitter<boolean>
当用户成功登录后，该事件将会被触发：
<app-account (loggedIn)="onLoggedIn($event)"></app-account>
signedUp: EventEmitter<boolean>
当用户成功注册后，该事件将会被触发：
<app-account (signedUp)="onSignedUp($event)"></app-account>
profileUpdated: EventEmitter<boolean>
当用户成功修改个人信息后，该事件将会被触发：
<app-account (profileUpdated)="onProfileUpdated($event)"></app-account>
示例代码
<app-account [loginCallbackUrl]="'/home'" [signupCallBackUrl]="'/home'" [editProfileCallbackUrl]="'/profile'"
(loggedIn)="onLoggedIn($event)" (signedUp)="onSignedUp($event)" (profileUpdated)="onProfileUpdated($event)">
</app-account>-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------------ - ---- ----------------
------------
--------- -----------
------------ -----------------------
---------- -----------------------
--
------ ----- ------------ -
----- - ----------------------------------------- ---- ------
----------------- -------- -
----------------- ------ --- - - -------
-
----------------- -------- -
----------------- ------ --- - - -------
-
----------------------- -------- -
-------------------- -------- - - -------
-
-总结
如此简单、方便、高效的用户账户组件，是不是很符合你的需求呢？
如果你正在寻找一个方便好用的账户组件，那么 @4geit/ngx-marketplace-account-component 将会是你不得不考虑的一个不错的选择！
用它来搭建一款简单的应用，将会为你的项目提供方便而可靠的用户账户实现方案！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055d1181e8991b448daa70