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)]
后面