Angular2项目日常开发中所遇问题及解决方案记录(四)

1、后端返回html字符串，前端需要对此字符串进行编译，ng1中有一个ng-bind-html，那么ng2中呢？

ng1：

<p ng-bind-html="theHtmlString"></p>

ng2：

<div [innerHTML]="theHtmlString"></div> 

2、在第三篇里面写过一次http请求headers统一处理方法，但是发现它在module加载时只会执行一次，现在对其第一次优化。

第一步：先创建个class

export class ArRequestOptions extends BaseRequestOptions  {

  merge (options?: RequestOptionsArgs) : RequestOptions {
    let headers = options.headers || new Headers;
    if (!headers.get('x-auth-token')) {
      headers.append('x-auth-token',localStorage.getItem("xAuthToken"));
    }
    if (!headers.get('Content-Type')) {
      headers.append('Content-Type','application/json');
    }
    options.headers = headers;
    return super.merge(options);
  }
}

第二步，在app.module.ts里面加入配置：

  providers : [
    {
      provide : RequestOptions,
      useClass : ArRequestOptions
    }
  ]

优化之后能保证每次请求都会执行merge方法，对headers进行统一处理。

3、typings新用法？

• 进入网站

http://microsoft.github.io/TypeSearch/

• 输入定义文件关键字例如：raty

• 进去之后可以看到一条命令：

• 最后下载的定义文件会在node_modules目录下：

• 使用方法：

4、因为写表单那块不多，在这里只能写个简单的表单例子：

html：

  <form name="resetPassword" (ngSubmit)="onSubmit()" [formGroup]="myForm" novalidate>
    <ul class="safe_ul" id="safePassword_ul">
      <li><p class="safe_title">{{'safe.nowPwd' | translate}}</p>
        <input type="password" name="oldPassword" class="form-control safe_input" [formControlName]="'oldPwd'" required [(ngModel)]="account.oldPwd">
        <p class="safe_flag error_red" [ngClass]="{safe_success: myForm.controls['oldPwd'].valid}"></p>
        <p class="safe_flag error_red" *ngIf="myForm.controls['oldPwd'].touched && myForm.controls['oldPwd'].hasError('invalidPwd')">{{'register_errPsdFormat' | translate}}</p>
        <p class="safe_flag error_red" *ngIf="myForm.controls['oldPwd'].touched && myForm.controls['oldPwd'].hasError('unRequired')">{{'register_errPsdNull' | translate}}</p>
      </li>
      <li><p class="safe_title">{{'safe.newPwd' | translate}}</p>
        <input type="password"  name="passwordOne" class="form-control safe_input" id="newPwdOne" [formControlName]="'nowPwd'" [(ngModel)]="account.newPwd"/>
        <p class="safe_flag error_red" [ngClass]="{safe_success: myForm.controls['nowPwd'].valid}"></p>
        <p class="safe_flag error_red" *ngIf="myForm.controls['nowPwd'].touched && myForm.controls['nowPwd'].hasError('invalidPwd')">{{'register_errPsdFormat' | translate}}</p>
        <p class="safe_flag error_red" *ngIf="myForm.controls['nowPwd'].touched && myForm.controls['nowPwd'].hasError('unRequired')">{{'register_errPsdNull' | translate}}</p>
      </li>
      <li><p class="safe_title">{{'safe.confirmPwd' | translate}}</p>
        <input type="password"  name="confirmPwd" class="form-control safe_input" id="confirmPwd" [formControlName]="'confirmPwd'" [(ngModel)]="account.confirmPwd">
        <p class="safe_flag error_red" [ngClass]="{safe_success: myForm.controls['confirmPwd'].valid}" *ngIf="myForm.controls['confirmPwd'].touched && !myForm.hasError('mismatch')"></p>
        <p class="safe_flag error_red" *ngIf="myForm.controls['confirmPwd'].touched && myForm.hasError('mismatch')">{{'register_errDiversePsd' | translate}}</p>
      </li>
      <li>
        <button type="button" class="btn safeCancel_btn" id="cancel_pass" (click)="changeUpdateStatus(false)">取消</button>
        <button type="submit" class="btn" [disabled]="!myForm.valid">{{'common.save' | translate}}</button>
      </li>
    </ul>
 </form>

component:

export class AccountSafeComponent {

  private myForm: FormGroup;

  constructor() {
    this.myForm = new FormGroup({
      oldPwd: new FormControl('', CustomValidator.specialCharValidator),
      nowPwd: new FormControl('', CustomValidator.specialCharValidator),
      confirmPwd : new FormControl('',Validators.required)
    },this.passwordMatchValidator);
  }

  passwordMatchValidator (g: FormGroup) {
    return g.get('nowPwd').value === g.get('confirmPwd').value ? null : {'mismatch': true};
  }
}

CustomValidator :

export class CustomValidator {

  static specialCharValidator(control: AbstractControl): { [key: string]: any } {
    if (control.value) {
      if (control.value.match(/^.{6,20}$/)) {
        return null;
      }
      else {
        return { 'invalidPwd': true };
      }
    } else {
      return {'unRequired' : true}
    }
  }
}

这期就到这里，下期主题预告：webpack打包发布（开发环境、生产环境配置）、按需加载。