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

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;
}

但是如果安裝了 4.0.0 版本怎麽改呢？

在 package.json 裏，將 dependencies 屬性的 bootstrap 屬性的值改為 3.3.7，然後運行命令 cnpm(npm) install 就可以了，因為 angular-cli 編譯文件會根據 package.json 文件的配置進行下載需要的庫或依賴。

四、在 .angular-cli.json 文件中引入必須要的樣式表和腳本文件

五、最後運行該應用查看效果

沒有變化，說明我們改造成功了。萬裏長征走完了第一步，頁面布局正常。

Angular總結三：組件