有了前面的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 |