组件初始化请自行完成,组件名:welcome。 预期效果: ![](https://img.kancloud.cn/45/70/457058c28a70be92892259aa574e2e0a_858x78.png) ## 默认组件 在前面的两个小节中,我们成功的在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) } ]; ``` #### 集成测试 ![](https://img.kancloud.cn/0d/d0/0dd02b73af4ff852a862e49632d8f27c_1270x181.png) ## 修正样式 最后,我们分别对欢迎页及页脚组件进行样式的修正。在教程的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 ``` #### 集成测试 ![](https://img.kancloud.cn/5d/a2/5da278afa542a7447993903ef296ebac_501x298.png) ![](https://img.kancloud.cn/f8/9f/f89fd7daf22e8d6b4a77718039f0657a_505x187.png) 最后,我们使用`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/) | \- |