1 生成面板元件

ng generate component dashboard

2 修改面板檔案

• 2.1 dashboard元件中，載入樣式，並通過迴圈*ngFor輸出英雄的名字

src/app/dashboard/dashboard.component.html

<h3>Top Heroes</h3>
<div class="grid grid-pad">
  <a *ngFor="let hero of heroes" class="col-1-4">
    <div class="module hero">
      <h4>{{hero.name}}</h4>
    </div>
  </a>
</div>
 

• 2.2 匯入Hero服務{ HeroService }
• 宣告陣列 heroes: Hero[] = [];
• 注入服務 constructor(private heroService: HeroService) { }
• 元件載入時呼叫方法 getHeroes(): void

src/app/dashboard/dashboard.component.ts

import { Component, OnInit } from '@angular/core';
import { Hero } from '../hero';
import { HeroService } from '../hero.service';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: [ './dashboard.component.css' ]
})
export class DashboardComponent implements OnInit {
  heroes: Hero[] = [];

  constructor(private heroService: HeroService) { }

  ngOnInit() {
    this.getHeroes();
  }

  getHeroes(): void {
    this.heroService.getHeroes()
      .subscribe(heroes => this.heroes = heroes.slice(1, 5));
  }
}
 

• 2.3 載入樣式檔案，這裡不多說

/* DashboardComponent's private CSS styles */
[class*='col-'] {
  float: left;
  padding-right: 20px;
  padding-bottom: 20px;
}
[class*='col-']:last-of-type {
  padding-right: 0;
}
a {
  text-decoration: none;
}
*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
h3 {
  text-align: center;
  margin-bottom: 0;
}
h4 {
  position: relative;
}
.grid {
  margin: 0;
}
.col-1-4 {
  width: 25%;
}
.module {
  padding: 20px;
  text-align: center;
  color: #eee;
  max-height: 120px;
  min-width: 120px;
  background-color: #3f525c;
  border-radius: 2px;
}
.module:hover {
  background-color: #eee;
  cursor: pointer;
  color: #607d8b;
}
.grid-pad {
  padding: 10px 0;
}
.grid-pad > [class*='col-']:last-of-type {
  padding-right: 20px;
}
@media (max-width: 600px) {
  .module {
    font-size: 10px;
    max-height: 75px; }
}
@media (max-width: 1024px) {
  .grid {
    margin: 0;
  }
  .module {
    min-width: 60px;
  }
}
 

3 新增dashboard路由, 增加一條陣列常量

src/app/app-routing.module.ts

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

4 把dashboard新增到root , 這樣重新整理後，就可以看到面板已經出現

<h1>{{title}}</h1>
<nav>
  <a routerLink="/dashboard">Dashboard</a>
  <a routerLink="/heroes">Heroes</a>
</nav>
<router-outlet></router-outlet>
<app-messages></app-messages>

5 導航到英雄詳情,和上面一樣，增加匯入，再增加路由陣列

src/app/app-routing.module.ts

import { HeroDetailComponent }  from './hero-detail/hero-detail.component';

const routes: Routes = [
  { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
  { path: 'dashboard', component: DashboardComponent },
  { path: 'detail/:id', component: HeroDetailComponent },
  { path: 'heroes', component: HeroesComponent }
];

6 修改dashboard模板，通過陣列渲染連結和頁面

src/app/dashboard/dashboard.component.html

<a *ngFor="let hero of heroes" class="col-1-4"
    routerLink="/detail/{{hero.id}}">
  <div class="module hero">
    <h4>{{hero.name}}</h4>
  </div>
</a>

7 調整HeroesComponent 中的英雄連結

<ul class="heroes">
  <li *ngFor="let hero of heroes">
    <a routerLink="/detail/{{hero.id}}">
      <span class="badge">{{hero.id}}</span> {{hero.name}}
    </a>
  </li>
</ul>

8 支援路由的 HeroDetailComponent

src/app/hero-detail/hero-detail.component.ts

• 8.1 匯入服務

import { ActivatedRoute } from '@angular/router';
import { Location } from '@angular/common';

import { HeroService }  from '../hero.service';

• 8.2 注入服務例項

constructor(
  private route: ActivatedRoute,
  private heroService: HeroService,
  private location: Location
) {}

• 8.3 從路由引數中提取 id,並通過id獲取資料

ngOnInit(): void {
  this.getHero();
}

getHero(): void {
  const id = +this.route.snapshot.paramMap.get('id');
  this.heroService.getHero(id)
    .subscribe(hero => this.hero = hero);
}

9 獲取單個英雄資料

src/app/hero.service.ts

getHero(id: number): Observable<Hero> {
  // TODO: send the message _after_ fetching the hero
  this.messageService.add(`HeroService: fetched hero id=${id}`);
  return of(HEROES.find(hero => hero.id === id));
}

10 從detail原路返回

• 10.1 在detail頁面中增加按鈕，並繫結事件

src/app/hero-detail/hero-detail.component.html (

<button (click)="goBack()">go back</button>

• 10.2 在服務中增加相應的程式碼返回

src/app/hero-detail/hero-detail.component.ts

goBack(): void {
  this.location.back();
}