組件初始化請自行完成，組件名：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/) | \- |