Angular6+ng-zorro实现登录页面

一、效果图

　　

二、html代码

 <div class="login-container">
   <div class="login-box">
     <!-- 账号登录 -->
     <form nz-form [formGroup]="user" class="login-form"  *ngIf="loginMethod">
       <nz-form-item>
         <nz-form-control *ngIf="alertConfig.login_state">
             <nz-alert   [nzType]="alertConfig.alert_type" [nzCloseable]="alertConfig.close_btn" [nzMessage]="alertConfig.alert_msg" [nzShowIcon]="alertConfig.show_icon" (nzOnClose)="afterClose()" style="position: relative;top: -10px;"></nz-alert>
         </nz-form-control>
         <nz-form-control>
           <nz-input-group [nzPrefix]="prefixUser">
             <input type="text" nz-input formControlName="userName" placeholder="用户名" >
           </nz-input-group>
           <nz-form-explain *ngIf="user.get('userName').dirty && user.get('userName').errors">**用户名不能为空!</nz-form-explain>
         </nz-form-control>
       </nz-form-item>
       <nz-form-item>
         <nz-form-control>
           <nz-input-group [nzPrefix]="prefixLock">
             <input type="password" nz-input formControlName="password" placeholder="密码" autocomplete="on" />
           </nz-input-group>
           <nz-form-explain *ngIf="user.get('password').dirty && user.get('password').errors">**密码不能为空!</nz-form-explain>
         </nz-form-control>
       </nz-form-item>

       <nz-form-item style="margin-bottom:0px;">
         <nz-form-control>
           <button nz-button class="login-form-button" nzType="primary" (click)="login()" #login_elem [nzLoading]="isLoadingOne">{{logintext}}</button>
           <p>
             <a style="color: #1890ff;position: relative;text-align: center;line-height: 30px;vertical-align: middle;top: 12px;left: 15px;">
               {{version}}
             </a>
             <a (click)="swithLoginMethod()" style="color: #1890ff;position: relative;text-align: right;top: 20px;right: -80px;">
               <!-- 扫码登录 -->
               <i nz-icon type="qrcode" style="font-size: 30px; color: #08c;" theme="outline"></i>
             </a>
           </p>
         </nz-form-control>
       </nz-form-item>
     </form>

     <ng-template #prefixUser><i nz-icon type="user" style="color:#88bdf3"></i></ng-template>
     <ng-template #prefixLock><i nz-icon type="lock" style="color:#88bdf3"></i></ng-template>

     <!-- 扫码登录 -->
     <form nz-form  class="login-form" [hidden]="loginMethod">

         <nz-form-item style="margin-bottom:0px;">
             <p *ngIf="qrcodeStatus" style="color: #bae7ff;margin-top: -10px;margin-bottom: 20px;">请用<span style="color: #1890ff;padding: 0 4px;font-weight: 300;font-size: 15px;">电站管家app</span>扫描二维码安全登录</p>
             <p *ngIf="!qrcodeStatus" style="color: #bae7ff;margin-top: -10px;margin-bottom: 20px;">
               <i nz-icon type="exclamation-circle" theme="outline" style="color:red;"></i>&nbsp;
               二维码已失效，请<a (click)="refreshQrcode()">刷新</a>重试
             </p>
             <p style="min-height:80px;">
                 <ng-container #code_container>
                     <!-- <img src="assets/images/app.png" style="width:50%;" alt=""> -->
                 </ng-container>
             </p>
         </nz-form-item>

         <nz-form-item style="position: relative;left: 0px;margin-top:0px;">
             <button nz-button class="login-form-button"  [nzType]="'primary'" (click)="swithLoginMethod()">返回</button>
         </nz-form-item>

     </form>

     <ng-template #code_tpl style="background-color:white;">
       <qrcode [qrdata]="qrcodeuuid" [size]="128" [level]="'M'" [colorlight]="'#000000'" [colordark]="'#ffffff'" style="position: relative;left: 24%;background-color: white; "></qrcode>
     </ng-template>

   </div>
 </div>

三、说明

　　ng-zorro 框架使用可参照其官网，详见：https://ng.ant.design/docs/introduce/zh。