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

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

ng1：

ng2：

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：

  

    

      
{{'safe.nowPwd' | translate}}
        
        

        
{{'register_errPsdFormat' | translate}}
        
{{'register_errPsdNull' | translate}}
      
      
{{'safe.newPwd' | translate}}
        
        

        
{{'register_errPsdFormat' | translate}}
        
{{'register_errPsdNull' | translate}}
      
      
{{'safe.confirmPwd' | translate}}
        
        

        
{{'register_errDiversePsd' | translate}}
      
      

        取消
        {{'common.save' | translate}}
      
    
 

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打包发布（开发环境、生产环境配置）、按需加载。