【Angular实战/网易云】验证码注册

一. 模板内容

思路如下：

1.  先让用户输入自己的手机号和密码，然后点击注册按钮跳转到输入验证码的界面。
2.  在验证码的界面输入正确的验证码之后，点击注册即可成功注册。

按照这个思路，“输入手机号和密码”视图以及“输入验证码”视图是两个完全不同的视图，需要用两个组件来实现。

但是，当用户输入完验证码以后，我们需要拿着用户之前输入的手机号和验证码发送到后台，看看这个验证码是否正确。

所以我们需要组件之间的数据通信，这个如果要靠非父子组件来实现稍微啰嗦了一点，又要往store里面加入新的内容。所以我们把注册页面和验证码页面当作父子组件，然后通过ng-template的配合*ngIf来判断什么时候显示注册页面，什么时候显示验证码页面。

<div class="register modal-content">
  <div class="modal-wrap" *ngIf="!showCode else code">
    <form nz-form nzLayout="vertical" [formGroup]="formModal" (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 type="submit" nz-button nzBlock>下一步</button>
        </nz-form-control>
      </nz-form-item>
    </form>
  </div>

  <ng-template #code>
    <div class="modal-wrap">
      <app-wy-check-code 
        [timing]="timing"
        [codePass]="codePass"
        [phone]="formModal.get('phone').value"
        (onCheckCode)="onCheckCode($