[Angular实战网易云]——29、注册

注册

注册功能是此项目中最后一个功能模块，我原本以为注册的逻辑很简单，没想到如此的繁琐，以至于项目频频短路，而且没有测试用的注册账号，所以在真的注册时并没有拿到相应的数据。

其次还有和收藏分享有关的功能，其基本的实现逻辑与登录等类似，区别之处就是数据的交互并不只是单一的接口，有关数据状态的变更还是要依靠ngrx来检测，所以关于分享与收藏并不打算繁琐的总结了。

---

场景

在登录页面和首页头像处有注册的入口，在点击触发后能够将弹窗显示并且类型为事先定义的register类型。在注册页面注入表单组件能够获取手机号码以及设置密码，然后能够根据密码来调用验证码的发送与判断。.

页面跳转

• app.component.html

<li nz-menu-item (click)="openModalByMenu('register')">
	<i nz-icon nzType="user-add" nzTheme="outline"></i>注册
 </li>

• app.component.ts

    constructor(
        private memberBatchActionsServer: MemberBatchActionsService,
    ) {
   }
    
    openModalByMenu (type: 'loginByPhone' | 'register') {
   
        if (type === 'loginByPhone') {
   
            this.openModal(ModalTypes.LoginByPhone);
        } else {
   
            this.openModal(ModalTypes.Register);
        }
    }
  // 打开弹窗
    openModal (type: ModalTypes) {
   
        this.memberBatchActionsServer.controlModal(true, type);
    }

弹窗的状态逻辑也是根据之前设置的action实现的。而在首页订阅弹框的显隐状态与类型即可动态的添加浮层。

---

• wy-layer-register.component.html

<div class="register modal-content">
    <div class="modal-wrap" *ngIf="!showCode else code">
      <form nz-form nzLayout="vertical" [formGroup]="formModel" (ngSubmit)="onSubmit()">
        <nz-form-item>
          <nz-form-label>手机号</nz-form-label>
          <nz-form-control nzHasFeedback nzErrorTip="请填写正确的手机号">
            <nz-input-group nzPrefixIcon="mobile">
              <input type="tel" nz-input placeholder="请输入手机号" formControlName="phone">
            </nz-input-group>
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-label>密码</nz-form-label>
          <nz-form-control nzHasFeedback nzErrorTip="请输入密码">
            <nz-input-group nzPrefixIcon="lock">
              <input type="password" nz-input placeholder="请输入密码" formControlName="password">
            </nz-input-group>
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-control>
            <button nz-button nzBlock nzType="primary" [disabled]="!formModel.valid">下一步</button>
          </nz-form-control>
        </nz-form-item>
      </form>
    </div>
  
    <ng-template #code>
      <div class="modal-wrap">
        <app-wy-check-code
          [phone]="formModel.get('phone').value"
          [codePass]="codePass"
          [timing]="timing"
          (onCheckCode)="onCheckCode($event)"
          (onReatSendCode)="sendCode()"
          (onCheckExist)="onCheckExist()">
        </app-wy-check-code>
      </div>
    </ng-template>
  </div>
  
  <div class