我們向往常一下初始化班級列表組件。使用`shell`打開`src/app`目錄，在此目錄中執行`ng g c clazz`。與前面的手法不太相同的是，以往我們在執行`ng g c xxx`時都會生成一個新的文件夾；此次`src/app/clazz`文件夾在建立班級模塊時便創建好了，此時在執行`ng g c clazz`組件時，會直接將組件創建到`clazz`目錄，創建以前`src/app/clazz`目錄內容如下： ```bash panjie@panjie-de-Mac-Pro app % pwd /Users/panjie/github/mengyunzhi/angular11-guild/first-app/src/app panjie@panjie-de-Mac-Pro app % tree clazz clazz ├── add │?? ├── add.component.css │?? ├── add.component.html │?? ├── add.component.mock-api.spec.ts │?? ├── add.component.spec.ts │?? └── add.component.ts ├── clazz.module.ts └── klass-select ├── klass-select.component.css ├── klass-select.component.html ├── klass-select.component.spec.ts └── klass-select.component.ts 2 directories, 10 files ``` 在`src/app`下執行`ng g c clazz`: ```bash panjie@panjie-de-Mac-Pro app % ng g c clazz Your global Angular CLI version (11.2.6) is greater than your local version (11.0.7). The local Angular CLI version is used. To disable this warning use "ng config -g cli.warnings.versionMismatch false". CREATE src/app/clazz/clazz.component.css (0 bytes) CREATE src/app/clazz/clazz.component.html (20 bytes) CREATE src/app/clazz/clazz.component.spec.ts (619 bytes) CREATE src/app/clazz/clazz.component.ts (271 bytes) UPDATE src/app/clazz/clazz.module.ts (523 bytes) ``` 此時`src/app/clazz`目錄如下： ```bash panjie@panjie-de-Mac-Pro app % tree clazz clazz ├── add │?? ├── add.component.css │?? ├── add.component.html │?? ├── add.component.mock-api.spec.ts │?? ├── add.component.spec.ts │?? └── add.component.ts ├── clazz.component.css ├── clazz.component.html ├── clazz.component.spec.ts ├── clazz.component.ts ├── clazz.module.ts └── klass-select ├── klass-select.component.css ├── klass-select.component.html ├── klass-select.component.spec.ts └── klass-select.component.ts 2 directories, 14 files ``` 可見，在`clazz`目錄下生成了班級列表組件對應的4個文件。接下來我們打開`clazz.component.spec.ts`，增加自動檢測變更的代碼，將`it`變更為`fit`，最后啟用單元測試`ng t`: ```typescript +++ b/first-app/src/app/clazz/clazz.component.spec.ts @@ -19,7 +19,8 @@ describe('ClazzComponent', () => { fixture.detectChanges(); }); - it('should create', () => { + fit('should create', () => { expect(component).toBeTruthy(); + fixture.autoDetectChanges(); }); }); ``` ## 原型 項目開啟，原型先行，無論是新手還是老手，這都是最簡單最有效的步驟，我們先增加一個普通的班級列表： ```html <table class="table table-striped mt-2"> <thead> <tr class="table-primary"> <th>序號</th> <th>名稱</th> <th>班主任</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>班級1</td> <td>張三</td> <td> <a class="btn btn-outline-primary btn-sm" > <i class="fas fa-pen"></i>編輯 </a> <span class="btn btn-sm btn-outline-danger" > <i class="far fa-trash-alt"></i>刪除 </span> </td> </tr> <tr> <td>2</td> <td>班級2</td> <td>李四</td> <td> <a class="btn btn-outline-primary btn-sm" > <i class="fas fa-pen"></i>編輯 </a> <span class="btn btn-sm btn-outline-danger" > <i class="far fa-trash-alt"></i>刪除 </span> </td> </tr> <tr> <td>3</td> <td>班級3</td> <td>王五</td> <td> <a class="btn btn-outline-primary btn-sm" > <i class="fas fa-pen"></i>編輯 </a> <span class="btn btn-sm btn-outline-danger" > <i class="far fa-trash-alt"></i>刪除 </span> </td> </tr> </tbody> </table> ``` 效果如下：  界面雖說還行，但編輯、刪除兩個按鈕離的太近了；另外，按鈕中的小圖標和文字離的也太近了。我們在`styles.css`解決一下這個問題: ```css +++ b/first-app/src/styles.css @@ -1 +1,8 @@ /* You can add global styles to this file, and also import other style files */ +.btn { + margin-right: 0.5em; +} + +.btn > svg.svg-inline--fa { + margin-right: 0.3em; +} ```  看起來好像順眼多了，更重要的是：由于我們把樣式代碼寫到了`styles.css`中，它影響的范圍是整個項目，這樣以下其它的組件也可以使用該樣式了。 ### 新增按鈕 接下來再添加一個新增按鈕： ```html +++ b/first-app/src/app/clazz/clazz.component.html @@ -1,3 +1,9 @@ +<div class="row"> + <div class="col-12 text-right"> + <a class="btn btn-primary mr-2"><i class="fas fa-plus"></i>新增</a> + </div> +</div> + <table class="table table-striped mt-2"> <thead> <tr class="table-primary"> ``` 測試過程略。 ## 分頁 最后我們在原型中加入分頁。相關的代碼bootstrap的相關網站為我們準備好了，我們僅需要復制下來再按當前的需求進行整理即可。需要注意的是，在生產項目中我們有時候也會碰到從網上復制的代碼效果不對的情況，這往往是由于bootstrap的版本號沒有對應好的原因。比如我們教程中當前使用的是版本4，則在參考網上的代碼時，首先在確認其版本也是4，否則則可能做無用功。 ```html +++ b/first-app/src/app/clazz/clazz.component.html @@ -55,3 +55,13 @@ </tr> </tbody> </table> + +<nav class="row justify-content-md-center"> + <ul class="pagination col-md-auto"> + <li class="page-item"><a class="page-link" href="#">下一頁</a></li> + <li class="page-item"><a class="page-link" href="#">1</a></li> + <li class="page-item"><a class="page-link" href="#">2</a></li> + <li class="page-item"><a class="page-link" href="#">3</a></li> + <li class="page-item"><a class="page-link" href="#">下一頁</a></li> + </ul> +</nav> ``` 效果如下：  最后進行完美： ```html +++ b/first-app/src/app/clazz/clazz.component.html @@ -58,8 +58,8 @@ <nav class="row justify-content-md-center"> <ul class="pagination col-md-auto"> - <li class="page-item"><a class="page-link" href="#">下一頁</a></li> - <li class="page-item"><a class="page-link" href="#">1</a></li> + <li class="page-item disabled"><a class="page-link" href="#">上一頁</a></li> + <li class="page-item active"><a class="page-link" href="#">1</a></li> <li class="page-item"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"><a class="page-link" href="#">下一頁</a></li> ``` 最終分頁效果如下：  ## 作業 本節中我們添加了兩個全局樣式，其中一個是設置按鈕中的圖標與字體的間隔的，請問我們為什么設置的是`.btn > svg.svg-inline--fa`屬性，而非`.btn > i`屬性。 | 名稱 | 鏈接 | | -------- | ------------------------------------------------------------ | | 分頁樣式 | [https://getbootstrap.com/docs/5.0/components/pagination/](https://getbootstrap.com/docs/5.0/components/pagination/) | | 本節源碼 | [https://github.com/mengyunzhi/angular11-guild/archive/step6.3.1.zip](https://github.com/mengyunzhi/angular11-guild/archive/step6.3.1.zip) |