02Angular组件创建封装

在使用了一段时间Angular + typescript之后，偶尔翻看了一些源码，发现它和React有很多相似之处，尽管国内没有多少人为 Angular布道，从第二版本开始使用人数突然大幅下降，开发社区不活跃，学习曲线相对陡，恶性循环就变得小众了，但是在国外却有不少Google的信奉者。

总归，编程类的语言，大家都是在相互的抄袭借鉴，诸如指令、编程思想、设计模式…… 例如：前端的JavaScript再慢慢向它的超集TypeScirpt转变，而像后端的老牌语言Java却加入了var来定义变量来模糊类型。

简单地总结一下它的学习规律吧，大致的学习坡度像一道闪电，由90度到10度，再到90度。

开始的90度是需要接受大量的ts语法，装饰器，指令，基本脏值检测变化检测用法，基本的依赖注入(刚开始思想还未转过来很少用)，还有基本的路由，模板语法等就不说了。中间的10度就在观察zorro的开源库，解锁更多ng的用法。再到后面90度就是性能优化，变化检测原理，有依赖注入思想的工厂函数等等。

想了很久，感觉非常有必要把组建的创建与封装放在开篇的位置。因为博主在刚接触ng项目的时候，接手的便是一个前人留下的烂摊子，动辄三四千行冗余的ts代码，困扰我最多的是选择重写还是重构。所以说，在需要重用或简化逻辑时，我们通常必须要选择去封装组件。

1. 创建组件模块

ng generate component 组件名（驼峰式）
//简写,eg:
ng g c components/ScrollableTab

编码习惯：在每一层组建中，都创建一个index.ts文件，
使用index.ts方便导入以及隔离内部变化对外部的影响

• 在每一层的文件夹下创建index.ts文件，使用export导出，好处：

1. 缩短引用的路径
2. 更好的封装，目录内部结构的变化不会影响外部

export * from './文件名'

• 如何使用组件

1. 找到要引用组件的ts中的selector

@Component({
  selector: 'app-acl',
  templateUrl: './acl.component.html',
})

2. 在html模板中匹配selector名称来引用

<app-组件名></app-组件名>

• 组件嵌套

ng中常见错误之一的for和if不能写在同一标签上（在一个宿主元素上只能应用一个结构型指令），利用ng-container标签可以在实现功能的基础上减少层级的嵌套.

2. 创建module模块

ng g m "名称" --routing
ng g m page/home --routing

3. 创建服务

ng g s service/home

单单这样是不够的，我们通常在使用时，需要进行组建传值，即:在父组件中接收子组件的值 ，亦或将子组件中的值emit派发到父组建中……