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