Angular總結三：組件

Angular 的應用就是一棵組件樹，一個頁面能夠是一個組件，某一頁面的一個區塊也能夠是一個組件。爲了弄明白組件及組件樹，我將原來作過的一個靜態網站進行組件改造。

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

原項目結構：

原項目首頁

 

1、在 G 盤 angular 目錄下新建 tuobei 項目

 

2、參照原項目目錄及須要的文件，在 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內容以下

 

3、作一些優化：

1. 爲了不文件過多，以及每個組件重複寫樣式，我試着刪除一些樣式，將每個組件的 css 刪除，包括 app.component.css

2. 刪除 css 文件後，要去掉 ts 文件裏面元數據裝飾器的樣式表地址

 

4、 安裝必要的庫或插件

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 文件的配置進行下載須要的庫或依賴。

 

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

 

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

沒有變化，說明咱們改形成功了。萬里長征走完了第一步，頁面佈局正常。