本章主要讲解如何封装组件
组件封装的意义
- 组件重用
- 简化逻辑
对于之前的代码，我们都直接写在了根组件中，但是我们目前只写了导航栏部分，还不包含页面上的其它部分，如商品列表、底部菜单栏等，理论上来说，所有组件都可以写在根组件中。但是，不仅根组件负荷大，也不利于代码的维护。如果是多人合作的项目，更不建议这样做。
对于一个组件来说可以被一个工程中的不同模块使用，甚至可以被不同工程重用，一定程度上减少了代码重复编写和维护的工作量。
同样，当以组件形式提供给其它模块或者工程使用时，使用者无须考虑组件如何被实现，只需组件功能是否满足使用条件
组件封装方法
创建新组件
ng generate component 组件名或者ng g c 组件名
总体命名规则：
坚持所有符号使用一致的命名规则，坚持遵循同一个模式来描述符号的特性和类型，推荐的模式为 feature.type.ts使用index.ts 方便导入以及隔离内部变化对外部的影响
每一级目录中都使用index.ts文件，用来导出当前目录中可供使用的组件、服务等等。后续使用的时候只需指定到目录，而无需指定到具体文件名
根据这章内容，新建导航栏组件并使用，代码改造过程如下：
-
新建ScrollableTab 组件，并在components和scrollable-tab文件夹下分别建index.ts 文件
image.png scrollable-tab/index.ts
export * from './scrollable-tab.component';components/index.ts
export * from './scrollable-tab';scrollable-tab.component.html
<ul>
<li *ngFor="let item of topBars; let i=index">
<a href="#" [class.active]="selectedIndex === i" (click)="selectedIndex = i">{{item}}</a>
</li>
</ul>
- scrollable-tab.component.ts
public topBars = ['热门', '女装', '男装', '鞋包', '家装', '汽车', '美食', '儿童', '母婴'];
constructor() { }
ngOnInit() {
}
- scrollable-tab.component.css
ul {
padding: 0;
margin: 0;
}
ul li {
display: inline-block;
margin: 0 5px;
}
.active {
color: red;
}
app.component.html
<app-scrollable-tab></app-scrollable-tab>app.component.ts
export class AppComponent {
title = 'pinduoduo';
}
- app.module.ts
import { ScrollableTabComponent } from './components';
declarations: [
AppComponent,
ScrollableTabComponent
],
-
保存，运行
3.gif
