添加仪表盘

本章节，我们将实现路由功能。

  • 添加一个仪表盘视图。
  • 在用户列表和仪表盘视图之间实现导航。

添加路由链接

除了把路由的 URL 粘贴到地址栏外，用户应该通过点击链接进行导航。

添加一个 <nav> 元素，并在其中放一个 <a> 元素，当点击它时，就会触发一个到 UsersComponent 的导航。 修改过的 AppComponent 模板（src/app/app.component.html ）如下：

  1. <h1>{{title}}</h1>
  2. <nav>
  3.   <a routerLink="/users">Users</a>
  4. </nav>
  5. <router-outlet></router-outlet>
  6. <app-messages></app-messages>

routerLink 属性的值为 “/users”，路由器会用它来匹配出指向 UsersComponent 的路由。 routerLink 是 RouterLink 指令的选择器，它会把用户的点击转换为路由器的导航操作。 它是 RouterModule 中公开的另一个指令。

同时，为了让显示更加美观，我们需要在 src/app/app.component.css 文件中添加如下样式：

  1. h1 {
  2.   font-size: 1.2em;
  3.   color: #999;
  4.   margin-bottom: 0;
  5. }
  6. h2 {
  7.   font-size: 2em;
  8.   margin-top: 0;
  9.   padding-top: 0;
  10. }
  11. nav a {
  12.   padding: 5px 10px;
  13.   text-decoration: none;
  14.   margin-top: 10px;
  15.   display: inline-block;
  16.   background-color: #eee;
  17.   border-radius: 4px;
  18. }
  19. nav a:visited, a:link {
  20.   color: #607d8b;
  21. }
  22. nav a:hover {
  23.   color: #039be5;
  24.   background-color: #cfd8dc;
  25. }
  26. nav a.active {
  27.   color: #039be5;
  28. }

运行查看效果

执行 ng serve 命名以启动应用。访问http://localhost:4200/，页面会显示出了应用的标题和指向用户列表的链接，但并没有显示用户列表。

添加仪表盘 - 图1

点击这个链接。地址栏变成了 /users， 并且显示出了用户列表。

添加仪表盘 - 图2

添加仪表盘视图

当有多个视图时，使用路由会更有价值。不过目前还只有一个用户列表视图。

使用 CLI 添加一个 DashboardComponent：

  1. ng generate component dashboard

从控制台可以看到生成了如下文件：

  1. ng generate component dashboard
  3. CREATE src/app/dashboard/dashboard.component.html (28 bytes)
  4. CREATE src/app/dashboard/dashboard.component.spec.ts (649 bytes)
  5. CREATE src/app/dashboard/dashboard.component.ts (281 bytes)
  6. CREATE src/app/dashboard/dashboard.component.css (0 bytes)
  7. UPDATE src/app/app.module.ts (847 bytes)

CLI 生成了 DashboardComponent 的相关文件，并把它声明到 AppModule 中。

修改 dashboard.component.html

修改 dashboard.component.html 如下：

  1. <h3>Top Users</h3>
  2. <div class="grid grid-pad">
  3.   <a *ngFor="let user of users" class="col-1-4">
  4.     <div class="module user">
  5.       <h4>{{user.name}}</h4>
  6.     </div>
  7.   </a>
  8. </div>

这个模板用来表示由用户名字链接组成的一个阵列。

  • *ngFor 复写器为组件的 users 数组中的每个条目创建了一个链接。
  • 这些链接被 dashboard.component.css 中的样式格式化成了一些色块。

修改 dashboard.component.ts

DashboardComponent 这个类和 UsersComponent 类很像。

  1. import { Component, OnInit } from '@angular/core';
  3. import { User } from '../user';
  4. import { UserService } from '../user.service';
  6. @Component({
  7.   selector: 'app-dashboard',
  8.   templateUrl: './dashboard.component.html',
  9.   styleUrls: ['./dashboard.component.css']
  10. })
  11. export class DashboardComponent implements OnInit {
  13.   users: User[] = [];
  15.   constructor(private userService: UserService) { }
  17.   ngOnInit() {
  18.     this.getUsers();
  19.   }
  21.   getUsers(): void {
  22.     this.userService.getUsers()
  23.       .subscribe(users => this.users = users.slice(1, 5));
  24.   }
  26. }
  • 它定义了一个 users 数组属性。
  • 它的构造函数希望 Angular 把 UserService 注入到私有的 userService 属性中。
  • 在 ngOnInit() 生命周期钩子中调用 getUsers。
  • 这个 getUsers 函数 slice 把要显示的用户的数量缩减为四个（取第二、第三、第四和第五）。

添加仪表盘到路由

要导航到仪表盘，路由器中就需要一个相应的路由。

把 DashboardComponent 导入到 AppRoutingModule 中：

  1. import { DashboardComponent }   from './dashboard/dashboard.component';

把一个指向 DashboardComponent 的路由添加到 AppRoutingModule.routes 数组中。

  1. { path: 'dashboard', component: DashboardComponent },

完整代码如下：

  1. import { NgModule } from '@angular/core';
  2. import { RouterModule, Routes } from '@angular/router';
  4. import { DashboardComponent }   from './dashboard/dashboard.component';
  5. import { UsersComponent } from './users/users.component';
  7. const routes: Routes = [
  8.   { path: 'dashboard', component: DashboardComponent },
  9.   { path: 'users', component: UsersComponent }
  10. ];
  12. @NgModule({
  13.   imports: [ RouterModule.forRoot(routes) ],
  14.   exports: [RouterModule]
  15. })
  16. export class AppRoutingModule { }

添加默认路由

当应用启动时，浏览器的地址栏指向了网站的根路径。 它没有匹配到任何现存路由，因此路由器也不会导航到任何地方。 <router-outlet> 下方是空白的。

要让应用自动导航到这个仪表盘，请把下列路由添加到 AppRoutingModule.Routes 数组中。

  1. { path: '', redirectTo: '/dashboard', pathMatch: 'full' },

这个路由会把一个与空路径“完全匹配”的 URL 重定向到路径为 ‘/dashboard’ 的路由。

浏览器刷新之后，路由器加载了 DashboardComponent，并且浏览器的地址栏会显示出 /dashboard 这个 URL。效果如下：

添加仪表盘 - 图3

完整的代码如下：

  1. import { NgModule } from '@angular/core';
  2. import { RouterModule, Routes } from '@angular/router';
  4. import { DashboardComponent }   from './dashboard/dashboard.component';
  5. import { UsersComponent } from './users/users.component';
  7. const routes: Routes = [
  8.   { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
  9.   { path: 'dashboard', component: DashboardComponent },
  10.   { path: 'users', component: UsersComponent }
  11. ];
  13. @NgModule({
  14.   imports: [ RouterModule.forRoot(routes) ],
  15.   exports: [RouterModule]
  16. })
  17. export class AppRoutingModule { }

添加仪表盘链接

在页面顶部导航区的增加仪表盘链接。实现各个链接在 DashboardComponent 和 UsersComponent 之间来回导航。

修改 AppComponent 的模板（src/app/app.component.html）：

  1. <h1>{{title}}</h1>
  2. <nav>
  3.   <a routerLink="/dashboard">Dashboard</a>
  4.   <a routerLink="/users">Users</a>
  5. </nav>
  6. <router-outlet></router-outlet>
  7. <app-messages></app-messages>

刷新浏览器，你就能通过点击这些链接在这两个视图之间自由导航了。

添加仪表盘 - 图4