Angular2+ 及 typescript 日常开发问题及技巧总结

Angular2+ 及 typescript 日程开发总结

1、for in 遍历对象时候

// 方式一
for (const fieldName of Object.keys(myObject)) {}

// 方式二
for (var field in myObject) {
    if (myObject.hasOwnProperty(field)) {
        ...
    }
}

// 方式三 也可以用Object.entries方法，可在遍历中途退出循环
for (const [key, value] of Object.entries(myObject)) {
   // TODO…
   return;
}

// fieldName 为属性名称，myObject为你想判断的对象

2、[(ngModel)] 和 （ngModelChange）html中书写顺序导致的ngModelChange($event)回调函数中，模版值问题

// html 代码
// 方式一 ngModelChange写在 ngModel后面
<input type="text" class="eui-form-control" 
[(ngModel)]="inputName"
(ngModelChange)="ngModelChange($event)" >

// 方式二 ngModelChange写在 ngModel前面
<input type="text" class="eui-form-control"  
(ngModelChange)="ngModelChange($event)" 
[(ngModel)]="inputName">

// ts代码
inputName = 111;
ngModelChange(n) {
	console.log('参数值', n);
	console.log('模版值', this.inputName);
}

方式一结果：
参数值 1112
模版值 1112
参数值 11123
模版值 11123
参数值 111234
模版值 111234
参数值 1112345
模版值 1112345

方式二结果：
参数值 1112
模版值 111
参数值 11123
模版值 1112
参数值 111234
模版值 11123
参数值 1112345
模版值 111234

方式一： 参数值和模版值会同步，再回调函数中获取且是最新变化的值
方式二：参数值和模版值不同步，再回调函数中获取，参数值是最新变化的值，模版值确实上一次的值

3、Angular 2+服务中注入Document
angular中难免会遇到需要操纵document的方法，此时不推荐直接使用document去获取dom,
我们注入DOCUMENT而不是直接使用它的最重要原因是服务器端渲染。如果您document.xxx直接在任何常规生命周期挂钩中调用ngOnInit/ ngAfterViewInit，那么document not defined在SSR期间您很可能会遇到错误。使用DI注入它可以避免这种情况。

import { DOCUMENT } from '@angular/common';

constructor(
        @Inject(DOCUMENT) private document: any
    ) {}
然后通过this.document去获取dom

总结： 为了不出错，(ngModelChange)方法强烈建议写在[(ngModel)]后面