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

你可能感兴趣的:(angular)