Angular开发技巧

由于之前有幸去参加了ngChina2018开发者⼤会，听了will保哥分享了Angular开发技巧，⾃⼰接触Angular也有差不多快⼀年的时间了，所以打算对Angular开发中的⼀些技巧做⼀个整理

⼯具篇

所谓 “⼯欲善其事，必先利其器”，下⾯我会介绍 如何打磨 `VS Code` 这把利器

1. 抛弃 资源管理器 ，使⽤快捷键 Commd + P 来查找⽂档，默认会展⽰最近打开的⽂档，并且⽀持模糊搜索⽂件

222.png

2. 快速打开最近⽂档：前进 Ctrl+󰀀 后退 Ctrl+󰀀

3. 灵活使⽤VS Code重构功能，可以通过快捷键 Command + 对代码进⾏重构

333.png

4. 安装插件 Angular Extension Pack (认准will保哥出品)，这个插件集成了很多提升Angular开发效率的插件，⽐如：

在 TS中实⽤ `ng-import-*` 导⼊常见的类

模板编辑的时候实⽤ ` a-*** ` 快速使⽤Angular的组件和指令 （Angular v7 Snippets）

实⽤ ` ng-* ` 来⽣成常⽤的ng代码段，创建 Component，Directive 等 （Angular Snippets）

通过快捷键把JSON转换成TS类

Ctrl+Alt+V 把粘贴板中的JSON 转为 TypescriptCtrl+Alt+S 将选中的JSON ⽣成对应的 Typescript

还有⼀个值得⼀提的⼀个⽐较实⽤的功能，通过快捷键来 快速切换组件对应的不同的⽂件 (Angular2-switcher)

e5dc25f8-a0ec-4706-919a-aa19194a7017.png

还有很多其他功能，插件中有详细介绍

5. 安装插件 Clipboard History , 这个插件会存储你最近的拷贝的记录，⽅便记录和粘贴最近⼏次的拷贝内容

111.png

6. 安装插件 Local History ，这个插件⽤于维护⽂件的本地历史记录。每次修改⽂件时，旧内容的副本都会保留在本地历史记录中，你可以随时将⽂件与历史记录中的任何旧版本进⾏⽐较，如果发⽣意外时，可以帮助我们恢复丢失的内容，需要注意的是它会⽣成⼀个 .history 的⽂件夹进⾏本地修改的备份，所以我们需要再 .gitignore 排除这个⽂件夹，避免将其提交到git仓储。7. 安装插件 Prettier - Code formatter ，这是⼀个代码格式化的插件，⽤过⼏个格式化的插件，个⼈感觉最好⽤的⼀个，更适合Angular开发8. 安装 Chrome 插件 Angular Angury 进⾏调试⼯作，可以查看 Component 的 State，Router Tree，NgModules的⼀些状态 （这个插件在复杂项⽬中并不是特别好⽤，包括对⼀些动态组件的⽀持⽐较差，但是在⼀些简单的项⽬中，或者新⼿在学习的时候安装这个插件⽐较⽅便调试排错）

444.png

555.png

开发篇

下⾯会介绍⼀些Angular开发中的技巧

1. 使⽤模板语⾔ as , 使⽤ as 对⼀些嵌套结构深的属性进⾏重命名改进前：

改进后：

2. 灵活使⽤ *ngIfElse ，很多⼈其实⼀直在写 *ngIf 并不知道其实Angular⽀持 else 的写法 *ngIf=\"条件 ; else 模板\" ，看看下⾯这两段代码改进前：

改进后：

没有数据

改进前的写法，也能实现同样的效果，但是因为数据是通过 async 订阅的，第⼀种写法相当于进⾏了两次订阅，当然也可以⽤ as 来解决，这⾥只是⼀个⽰例。

还有⼀种情况，在条件多的时候，通过第⼀种⽅式写的话，如果条件有修改的话，必须要对取反后的条件进⾏维护， ⽽⽤ ngIfElse 的⽅式则只需要进⾏⼀次维护。

3. 使⽤ ng-container 对代码进⾏整理，使代码更清晰，提升代码的可读性

...

...

...

4. @ViewChild 读取指定类型的实例

上⾯这⾏代码有三个实例 ElementRef 、 ThyInputComponent 、 ThyAutoFocusDirective ，在某些情况下如果我们要获取指定类型的实例应该怎么做呢？

@ViewChild('input', { read:ThyInputComponent }) inputComponent : ThyInputComponent ;

5. 使⽤ async 管道，直接在模板中订阅流，⽽不必将结果存储在中间属性中，当组件被销毁时，Angular将会⾃动取消订阅。

在⼀些情况下，我们可能需要重复使⽤订阅的数据，但是我们⼜不能每次使⽤的时候都⽤ async 去订阅，所以我们可以通过刚才说的 as 对齐进⾏重命名。

6. 使⽤ takeUntil 来管理订阅

在某些复杂的业务中，我们可能需要订阅多个流，⼀个⼀个去取消订阅⼜繁琐，⼜会产⽣很多冗余代码，不利于代码的维护。这时候我们可以 takeUntil 来管理多个订阅，统⼀取消订阅。

private _ngUnsubscribe$ = new Subject();ngOnInit() {

this.students$.pipe(

takeUntil(_ngUnsubscribe$) ).subscribe(() => { ... });

this.books$.pipe(

takeUntil(_ngUnsubscribe$) ).subscribe(() => { ... });}

ngOnDestroy() {

this._ngUnsubscribe$.next();

this._ngUnsubscribe$.complete();}

7. 合理使⽤ ngZone runOutsideAngular 来提升应⽤性能

我们知道Angular可以⾃动处理变化检测，这是因为它使⽤了 zone.js ，简单的来说， zone.js 就是通过打补丁的⽅式来拦截浏览器的事件，然后进⾏变化检测，但是变化检测是极其消耗资源的，如果绑定了⼤量的事件，那么就会造成性能问题，所以我们可以使⽤ runOutsideAngular 来减少不必要的变化检测。

this.ngZone.runOutsideAngular(() => {

this.renderer.listen(this.elementRef.nativeElement, 'keydown', event => { const keyCode = event.which || event.keyCode; if (keyCode === keycodes.ENTER) { event.preventDefault(); this.ngZone.run(() => {

this.thyEnter.emit(event); }); } });});

上⾯这段代码是绑定⼀个回车事件，如果不使⽤ runOutsideAngular 的话，只要触发键盘输⼊事件，就会执⾏变化检测，这时候我们可以⽤ runOutsideAngular 在只有为enter事件的时候，去调⽤ ngZone.run() 主动触发变化检测8. 灵活使⽤ ngTemplateOutlet 来实现递归

在我们实际开发的过程中，经常会展⽰⼀些树形结构的数据，如果业务场景⽐较简单，可以通过Angular的 ngTemplateOutlet 来实现递归展⽰，如果业务复杂，建议还是通过组件的⽅式来实现。写在最后

上⾯是我这⼀年Angular开发的过程中积累的⼀些⼩技巧（可能还有没想起来的，我想起来会慢慢的往上补），⼤家如果发现有错误的地⽅，请指正。其实去年就写好这篇⽂章，但是总感觉缺点什么，不过⽆所谓了~~ 希望能给Angular学习者提供帮助~

Worktile官⽹： 本⽂作者：王凯

⽂章⾸发于「」，转载请注明来源。