组件初始化请自行完成，组件名：welcome。 预期效果：  ## 默认组件 在前面的两个小节中，我们成功的在app.component.html引用了两个组件。而按前面的方法欢迎欢迎页则将失效。原因是前两个组件是整个app组件通用的，无论是教师管理还是班级管理都需要NAV及footer组件；而当前的欢迎页只有首页需要。 要解决欢迎页仅在首页出现的问题，我们还要回想下在班级管理中，我们是如何做到在`klass`路径上仅显示班级列表组件，而在`klass/add`路径上仅显示班级添加组件的。 klass/klass.module.ts ```javascript /*定义路由*/ const routes: Routes = [ { path: '', ★ component: IndexComponent }, { path: 'add', component: AddComponent }, { path: 'edit/:id', component: EditComponent } ]; ``` * ★ 没错，就这个空的path。当我们需要为某个组件(模块)设置默认的页面时，使用`path: ''`方法。它表示：当未匹配到子路由，由我来填充页面。 ### 增加欢迎页 app-routing.module.ts ```javascript const routes: Routes = [ { ✚ path: '', component: WelcomeComponent }, { path: 'teacher', component: TeacherIndexComponent }, { path: 'teacher/add', component: TeacherAddComponent }, { path: 'teacher/edit/:id', component: TeacherEditComponent }, { path: 'klass', loadChildren: () => import('./klass/klass.module').then(mod => mod.KlassModule) } ]; ``` #### 集成测试  ## 修正样式 最后，我们分别对欢迎页及页脚组件进行样式的修正。在教程的1.2节中，我们在项目构建时选择的CSS构建语言为`Sass`，相对于传统的`CSS`，它具有使用起来更灵活、功能更丰富的特点。在网官方上其如下进行了描述： ***** Sass is the most mature, stable, and powerful professional grade CSSextension language in the world. Sass is a stylesheet language that’s compiled to CSS. It allows you to use[variables](https://sass-lang.com/documentation/variables),[nested rules](https://sass-lang.com/documentation/style-rules#nesting),[mixins](https://sass-lang.com/documentation/at-rules/mixin),[functions](https://sass-lang.com/documentation/modules), and more, all with a fully CSS-compatible syntax. Sass helps keep large stylesheets well-organized and makes it easy to share design within and across projects. ***** 根据描述我们得知：Sass是一个扩展的样式表语言，该语言将最终编译为css样式。它允许我们使用变量、规则、mixins(复用)、函数来编写样式...... ### welcome welcome/welcome.component.sass ```sass h1 margin: 200px auto ``` * Sass省略了CSS中的`{}`以及`;`，以缩进的形式来表示附属关系。 ## footer footer/footer.component.sass ```sass p border-top: saddlebrown 1px solid padding-top: 5px color: gray font-size: 12px ``` * saddlebrown是Less(和Sass差不多)为我们提供的优秀的开箱即用的颜色。 ## 其它样式 最后：由于我们的系统中各个界面的字段都不多，所以主体内容不进行全屏显示。 app.component.html ```html <app-nav></app-nav> <div class="container"> <router-outlet></router-outlet> </div> <app-footer></app-footer> ``` 同时我们不希望主体内容距离nav及footer过近 app.component.sass ```sass .container padding-top: 20px padding-bottom: 20px ``` #### 集成测试   最后，我们使用`ng test`对项目进行整体测试以防止发生预期以外的错误。 # 参考文档 | 名称 | 链接 | 预计学习时长(分） | | --- | --- | --- | | 源码地址 | [https://github.com/mengyunzhi/spring-boot-and-angular-guild/releases/tag/step4.4](https://github.com/mengyunzhi/spring-boot-and-angular-guild/releases/tag/step4.4) | \- | | Sass | [https://sass-lang.com/](https://sass-lang.com/) | \- | | Less | [http://lesscss.org/](http://lesscss.org/) | \- |