Angular8 实战（十）【组件封装】分离封装第一个组件

本章主要讲解如何封装组件

组件封装的意义

• 组件重用
• 简化逻辑

对于之前的代码，我们都直接写在了根组件中，但是我们目前只写了导航栏部分，还不包含页面上的其它部分，如商品列表、底部菜单栏等，理论上来说，所有组件都可以写在根组件中。但是，不仅根组件负荷大，也不利于代码的维护。如果是多人合作的项目，更不建议这样做。

对于一个组件来说可以被一个工程中的不同模块使用，甚至可以被不同工程重用，一定程度上减少了代码重复编写和维护的工作量。

同样，当以组件形式提供给其它模块或者工程使用时，使用者无须考虑组件如何被实现，只需组件功能是否满足使用条件

组件封装方法

• 创建新组件
  ng generate component 组件名 或者 ng g c 组件名
  总体命名规则：
  坚持所有符号使用一致的命名规则，坚持遵循同一个模式来描述符号的特性和类型，推荐的模式为 feature.type.ts

• 使用index.ts 方便导入以及隔离内部变化对外部的影响

每一级目录中都使用index.ts文件，用来导出当前目录中可供使用的组件、服务等等。后续使用的时候只需指定到目录，而无需指定到具体文件名

根据这章内容，新建导航栏组件并使用，代码改造过程如下：

1. 新建ScrollableTab 组件，并在components和scrollable-tab文件夹下分别建index.ts 文件

   
   
   image.png

2. scrollable-tab/index.ts
   export * from './scrollable-tab.component';

3. components/index.ts
   export * from './scrollable-tab';

4. scrollable-tab.component.html

  

    {{item}}
  

5. scrollable-tab.component.ts

public topBars = ['热门', '女装', '男装', '鞋包', '家装', '汽车', '美食', '儿童', '母婴'];
  constructor() { }

  ngOnInit() {
  }

6. scrollable-tab.component.css

ul {
  padding: 0;
  margin: 0;
}

ul li {
  display: inline-block;
  margin: 0 5px;
}

.active {
  color: red;
}

7. app.component.html
   

8. app.component.ts

export class AppComponent {
  title = 'pinduoduo';
}

9. app.module.ts

import { ScrollableTabComponent } from './components';

 declarations: [
    AppComponent,
    ScrollableTabComponent
  ],

10. 保存，运行

    
    
    3.gif