Angular总结三：组件

时间：2018-02-13 22:55:07 阅读：242 评论：0 收藏：0 [点我收藏+]

标签：plugin vba relative padding pack 万里 pos flexbox 地址

Angular 的应用就是一棵组件树，一个页面可以是一个组件，某一页面的一个区块也可以是一个组件。为了弄明白组件及组件树，我将原来做过的一个静态网站进行组件改造。

原项目地址 https://github.com/xinjie-just/tuobei-customer-back-end.git。

原项目结构：

技术分享图片

原项目首页

技术分享图片

一、在 G 盘 angular 目录下新建 tuobei 项目

技术分享图片

二、参照原项目目录及需要的文件，在 assets 资源下新建 fonts，styles，scripts，images，plugins 目录并存放相应的文件

技术分享图片

根据对原项目布局的分析，可对首页分为 header，menu，content，footer 四部分，于是，使用 ng g component component-name 命令创建对应的组件，并把主页(app.component.html)进行拆分，拆分后的内容分别添加到对应的组件模板里：

1. 生成组件：

技术分享图片

app.module.ts 里的申明添加了 HeaderComponent 组件，如下：

技术分享图片

2. 拆分主页(app.component.html)

技术分享图片

3. 添加到对应的组件模板里

header内容如下

技术分享图片

三、做一些优化：

1. 为了避免文件过多，以及每一个组件重复写样式，我试着删除一些样式，将每一个组件的 css 删除，包括 app.component.css

2. 删除 css 文件后，要去掉 ts 文件里面元数据装饰器的样式表地址

技术分享图片

四、安装必要的库或插件

npm install bootstrap(plugins-name) --save 命令安装插件或库

技术分享图片

注意这里安装 bootstrap 时，不要安装 4.0.0 版本，安装 3.3.7 版本，因为在 4.0.0 版本中 .navbar 类使用弹性伸缩布局了，导致布局错乱。

.navbar {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 0.5rem 1rem;
}