【荐】Angular常见误区

前言:翻译了半年之后,感觉差不多可以“金盆洗手”了。具体原因感兴趣的朋友可以阅读《About Technical Translation》这篇文章。但是自从不翻译了之后,逼自己看英文技术文章就少了很多,所以就给自己想出了新的点子——推荐阅读系列。还有另外一个系列,stay tuned。看我月底能憋出什么大招来~~~

其实推荐系列是翻译系列的简化吧,看到好的文章,写个摘要,推荐给大家阅读。比起翻译,我觉得写个摘要要高效地多吧。

————–进入正题————–

【推荐文章】:Top Common Mistakes of Angular Developers

【作者】:Dor Moshe

【推荐人】:野草

【推荐理由】:本文介绍了Angular开发者常会犯的错误,并且给出了解决方案。

【文章概要】:

Angular开发者常常会犯以下的错误:

  • 框架名称:没有Angular 1和Angular 2, 只有AngularJS和Angular。Angular的第三方库,建议用ngx-为前缀,而不是ng2-。因为Angular每6个月会更新一次,你懂的。。。
  • ngOnChanges监听输入对象的变化,但仅限于它的引用,也就是说,如果对象的某个属性发生变化,Angular是不会触发onChanges的。解决方法:用ngDoCheck钩子代替;用不可变对象作为输入;将对象分解为基本变量;使用订阅对象。
  • 使用订阅对象时,别忘了在ngOnDestroy钩子中销毁,否则会造成内存泄漏。
  • 重复/不必要的取消订阅:有些情况下Angular会自动销毁订阅对象,比如使用async管道的时候;比如短暂时间的订阅Observable.timer(1000).subscribe(…)http.get(‘http://medium.com’).subscribe(…);再比如RxJS自带的方法,take(n), takeWhile(predicate), first() 以及first(predicate)等。
  • 服务应该在模块注入还是组件注入:在模块注入的话,该模块下只会生成一个服务实例,并在模块下的所有组件共享;如果在组件中注入,每实例化一次组件,服务也会实例化一次。
  • 直接修改DOM:Angular不再是一个web框架,而是一个平台。Angular应用可以在浏览器,服务端,甚至客户端上运行。所以,不要直接取DOM元素,用ElementRef,设置属性用this._renderer2.setElementProperty
  • 在多个模块中声明组件:Angular中的组件是从属于模块的,一个组件不能同时属于多个模块。如果遇到多个模块都需要这个组件的时候,解决方法:如果两个模块是父子模块关系,在子模块中声明并导出;否则,创建一个共享模块,分别导入到需要的两个模块中。

【荐者言】

附上本人作为初学者的踩坑记录,希望对大家有帮助。

  • ngFor不能用于Object
  • rowspan colspan不能绑定变量,要用attr.colspan
    https://stackoverflow.com/questions/35615751/why-is-colspan-not-a-known-native-attribute-in-angular-2/35616510
  • 定义函数要仔细,注意引用对象的问题 ,可以用Object. assign
  • 所有使用的东西都要在模块中注册,除了服务
  • ng-bootsrap modal弹窗一直没出来,问题:安装的bootstrap版本不对
  • 组件作为modal内容的时候,需要设置成entryComponents
  • “/animations/browser”‘ has no exported member ‘ɵDomAnimationEngine’ BrowserAnimationModule模块的版本问题,@angular/animations 4.1.3没有问题
  • expression changed after it has been checked error 错误,可以参见Everything you need to know about the ExpressionChangedAfterItHasBeenCheckedError error
  • 后端返回文件,前端如何下载,responseType:blob转成blob然后下载
  • button忘了加type=“button”属性,按enter的时候就会触发。因为button在IE之外的浏览器默认属性为submit,所以触发了。
  • Error: No provider for ViewContainerRef!
    Error: No provider for ViewContainerRef! ViewContainerRef只能注入组件或者指令,不能注入服务