有了前面的NAV組件的開發經驗，footer組件就比較簡單了。 ## 初始化 ``` panjiedeMac-Pro:app panjie$ ng g c footer CREATE src/app/footer/footer.component.sass (0 bytes) CREATE src/app/footer/footer.component.html (21 bytes) CREATE src/app/footer/footer.component.spec.ts (628 bytes) CREATE src/app/footer/footer.component.ts (270 bytes) UPDATE src/app/app.module.ts (1030 bytes) ``` ### V層 把一些不變的寫在V層 footer/footer.component.html ``` <div> <p class="text-center">Super-powered by 河北工業大學<a href="http://www.mengyunzhi.com" target="_blank">夢云智開發團隊</a> ?2010-{{currentYear}}</p> </div> ``` ### C層 把一些在本項目中可能會發生變動的寫在C層 footer/footer.component.ts ``` export class FooterComponent implements OnInit { /*當前年份*/ currentYear: number; constructor() { } ngOnInit() { this.currentYear = new Date().getFullYear(); ① } } ``` * ① 獲取當前年份 ### 測試  ## 集成 有了footer組件，我們使用選擇器將其添加到app組件中。 app.component.ts ``` <app-nav></app-nav> <router-outlet></router-outlet> <app-footer></app-footer> ``` ### 測試 ``` Failed: Template parse errors: 'app-footer' is not a known element: ``` 在測試文件中加入聲明該組件 app.component.spec.ts ``` declarations: [ AppComponent, NavComponent, FooterComponent ], ```  最后進行整體項目測試以確定未對歷史功能造成影響 。 # 參考文檔 | 名稱 | 鏈接 | 預計學習時長(分） | | --- | --- | --- | | 源碼地址 | [https://github.com/mengyunzhi/spring-boot-and-angular-guild/releases/tag/step4.3](https://github.com/mengyunzhi/spring-boot-and-angular-guild/releases/tag/step4.3) | \- | | 文本處理 | [https://getbootstrap.net/docs/utilities/text/](https://getbootstrap.net/docs/utilities/text/) | 5 | | Date.prototype | [https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global\_Objects/Date/prototype](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Date/prototype) | 5 |