# 路由 我们已经共同完成了教师列表组件、新建教师组件。本节我们使用`路由`将这两个组件结合起来。 ## 什么是路由 在生活中我们接触`路由`这个词汇更多来源于`路由器`。生活中的路由器主要提供的供手机、电脑等网络设置上网，好像`路由`就等于`怎么上网`一样。 但实际上并不如此，一个看似不大的家庭路由器已经发展为集成拨号、路由、交换、无线发射等众多功能综合网络设备。而`路由`仅仅是这个设备一个核心功能而已。 路由一词来自于`router`，而`router`译为：拥有选择路线功能的能动体。比如生活中的快递小哥，就是个典型的`router`。他可以按照我们快照上的地址，选择合适的路线，将快递（数据）转发到我们（终端）手中。 综上所述，`router`的作用可以理解为**具有数据转发功能的X**。所以日后每当我们听到路由一词时，应该想到的都应该是**数据转发**。 在Angular中也同样如此，Angular中的路由同样起的是数据转发的作用。其具体的功能可以描述为：将浏览器地址栏中的数据转发到某个组件上。 ## 默认路由 Angular提供了一条默认入口路由，该路由使得我们在访问[http://localhost:4200](http://localhost:4200)时，能够被App组件处理，该路由被定义在了`src/app/app.module.ts`中： ```typescript @NgModule({ declarations: [ AppComponent, AddComponent ], imports: [ BrowserModule, AppRoutingModule, HttpClientModule, FormsModule ], providers: [], 👉 bootstrap: [AppComponent] }) export class AppModule { } ``` - bootstrap译为**启动**，当访问http://localhost:4200时实际上我们查看到的是AppComponent便是此处的代码生效。 ## 路由设置 除了入口路由外，当前其它的路由在`src/app/app-routing.module.ts`中设置： ```typescript import {NgModule} from '@angular/core'; import {Routes, RouterModule} from '@angular/router'; 👉const routes: Routes = []; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { } ``` - 在此routers数组中定义路由 比如我们当前希望用户访问 http://localhost:4200/add时触发Add组件，则可以如下设置： ```typescript +import {AddComponent} from './add/add.component'; -const routes: Routes = []; +const routes: Routes = [ + { + path: 'add', + component: AddComponent + } +]; ``` 如引，我们便设置了访问路径`path`以`AddComponent`的关联信息。 ## 路由出口 此时我们使用`ng s`启动项目并在浏览器中输入http://localhost:4200/add查看效果。  🤔 为什么会是这样呢？此时我们打开控制台，并没有发现任何报错信息，那么说好的Add组件呢？ 这是由于在Angular中设置完路由后，需要为此路由指定一个出口。即在哪个位置上显示上当前路由对应的组件。当前访问的地址为：`http://localhost:4200/add`，Angular可以成功的获取到`/add`信息，并将其分解为父路径`/` ✚ 子路径 `add`，其中父路径`/`对应启动组件 -- App组件，而子路径`add`则对应Add组件。 所以若想显示子路径对应的Add组件，则应该在其父路径对应的（父）组件上定义一个路由出口，即：在父组件的哪个位置上显示该Add子组件，假设我们想把子Add组件显示在表格上方： ```html --- a/first-app/src/app/app.component.html +++ b/first-app/src/app/app.component.html @@ -1,3 +1,4 @@ + 👉 <router-outlet></router-outlet> <table class="table table-striped"> <thead> <tr class="table-primary"> ``` - 使用`<router-outlet></router-outlet>`来表示使用路由设置的子组件的位置。  ## 生产环境 为了更好的查看到一些效果，我们接下来将父App组件中获取教师列表的功能，由测试开发环境变更为生产环境。 当前我们准备了如下API来获取后台系统中的所有教师数据。 ```bash GET /teacher ``` | **类型Type** | **名称Name** | **描述Description** | **类型Schema** | | ------------ | ------------ | ------------------- | ------------------------------------------------------------ | | Response | | | `[{id: number, username: string, name: string, email: string, sex: boolean}, {...}]` | 由以下接口信息，我们获取到：请求后台全部教师的地址、请求成功后将返回的数据格式为**教师数组**。则按该接口更新代码如下： ```typescript --- a/first-app/src/app/app.component.ts +++ b/first-app/src/app/app.component.ts @@ -18,7 +18,7 @@ export class AppComponent implements OnInit { * 组件初始化完成后将被自动执行一次 */ ngOnInit(): void { - this.httpClient.get<[]>('assets/teacher-all.json') + this.httpClient.get<[]>('http://angular.api.codedemo.club:81/teacher') .subscribe(teachers => this.teachers = teachers); } } ``` 此时，添加新教师后再次刷新页面，可以查看到成功的添加了一位新教师：  > 你或许能够请求到更多的用户，这些用户可能是系统内置或是由其它的学生添加的。 ## 验证 此时我们输入http://localhost:4200时，将显示教师列表；输入http://localhost:4200/add时，将显示新增教师及教师列表。 好了，就到这里。 ## 本节作业 1. 请尝试将添加教师Add组件移动到其父组件的其它位置并查看效果。 2. 当前教师列表组件与教师添加组件是父子关系，这使得在添加教师时仍然显示了教师列表。如果甲方期待两个组件是并列关系，即访问http://localhost:4200/add仅显示添加组件，而访问http://localhost:4200仅显示教师列表组件。你的拟解决方案是什么，按此解决方案，应该如何去google关键字。 ## 小结 - Angular根据路径来确认父子组件 - 需要在父组件中指定子组件的位置后，子组件才会成功的显示 - 在父组中的模板文件中使用`<router-outlet></router-outlet>`来指定子组件的位置 | 名称 | 地址 | 备注 | | ---------------- | ------------------------------------------------------------ | ---- | | 定义一个基本路由 | [https://www.angular.cn/guide/router#defining-a-basic-route](https://www.angular.cn/guide/router#defining-a-basic-route) | | | 路由配置 | [https://www.angular.cn/guide/router#configuration](https://www.angular.cn/guide/router#configuration) | | | 本节源码 | [https://github.com/mengyunzhi/angular11-guild/archive/step2.3.4.zip](https://github.com/mengyunzhi/angular11-guild/archive/step2.3.4.zip) | |