issue#10 -6.ROUTING

[ChuangPoPO]

Add the Angular Router and learn to navigate among the views：

• Add a Dashboard view.
• Navigate between the Heroes and Dashboard views.
• Clicking on a hero in either view navigates to a detail view of the selected hero.
• Clicking a deep link in an email opens the detail view for a particular hero.

Action plan：

• Turn AppComponent into an application shell that only handles navigation
• Relocate the Heroes concerns within the current AppComponent to a separate HeroesComponent
• Add routing
• Create a new DashboardComponent
• Tie the Dashboard into the navigation structure

[ChuangPoPO]

2/15 : 新增heroes.component.ts及新的app.component.ts 修改app.moduel.ts 讓頁面還是可以正常運作， AppComponent僅負責作為導覽列(navigation)， 真正在呈現資料則由HeroesComponent自己負責

next : Add Routing

[ChuangPoPO]

<router-outlet></router-outlet> ? The router displays each component immediately below the as we navigate through the application.

[ChuangPoPO]

2/20 可以執行，但畫面出不來，找不到問題， 在index.html內加入<base href="/"> 就出現了

Next: Add a Dashboard

[ChuangPoPO]

import { Component } from '@angular/core';
@Component({
  selector: 'my-app',
  template: `
     <h1>{{title}}</h1>
     <a routerLink="/heroes">Heroes</a>
     <router-outlet></router-outlet>
   `
})
export class AppComponent {
  title = 'Tour of Heroes';
}

<router-outlet>

• 加在 template 的最下面
• 他會依我們導覽的網址，找到對應的router，並立即呈現出對應的component
• 它是 RouterModule 所提供的指令

<a routerLink="/heroes"> RouterLinks

• (當使用者點擊)在觸發尋覽component時， template 中加入錨點
• 這個作為錨點的字串會告訴router，使用者所點擊的連結

[ChuangPoPO]

RouterModule 的 redirectTo 會將初始畫面引導到設定的位置，同時呈現在網址列。

[ChuangPoPO]

2/22 加入了導覽列，可切換dashboard和heroes

Next time：Dashboard Top Heroes

[ChuangPoPO]

templateUrl property，指向新的template

@Component({
  moduleId: module.id,
  selector: 'my-dashboard',
  templateUrl: './dashboard.component.html',
})

moduleId: module.id使相對路徑的module載入 templateUrl 可參考1：http://stackoverflow.com/questions/37178192/angular2-what-is-the-meanings-of-module-id-in-component 可參考2：https://angular.io/docs/ts/latest/cookbook/component-relative-paths.html 使用 moduleId 在 @Component 內，則 templateUrl 則不在需要寫絕對路徑(absolute path)，僅相對路徑(relative path)即可。

[pickonefish]

module.id 有啥用呢？我還不明白。

---

POPO：解答請見上方~~~

[ChuangPoPO]

2/23

Next time：Share the HeroService

[ChuangPoPO]

實作 DashboardComponent

export class DashboardComponent implements OnInit {

  heroes: Hero[] = [];

  constructor(private heroService: HeroService) { }

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

利用 Array.slice method 讀取 4 位英雄

[ChuangPoPO]

3/2

Next Step：Navigate to Hero Details

[ChuangPoPO]

在 hero-detail.component.ts import

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

import 'rxjs/add/operator/switchMap';

...

ngOnInit(): void {
  this.route.params
    .switchMap((params: Params) => this.heroService.getHero(+params['id']))
    .subscribe(hero => this.hero = hero);
}

1. id : number
2. route.params : string
3. +params['id'] --> (+) converts string 'id' to a number
4. subscribe (關注) method：用來偵測 id 的改變，(重新)設定檢索(retrieved) Hero
5. 在 RxJS 中有兩個角色，Observable 和 Subscription。Observable 負責產生資料，建立後不會馬上啟動，而且只有存在 Subscription 關注 (subscribe) 才會開始。
6. Angular2 系列文八 - HTTP 與 Pipe
7. ActivatedRoute：用來讀取 URL 參數
8. Router：用來控制路由
9. Router

[ChuangPoPO]

3/27 Next step： Do you need to unsubscribe? 前的ngOnInit還看不懂

[ChuangPoPO]

<!-- 呼叫 my-hero-detail component 用[hero]傳入selectedHero -->
<!-- hero-detail.component.ts 會用 @Input() 來接收這個selectedHero-->
<!-- 並assign給hero-detail.component.ts 內的 hero-->
<hero-detail [hero]="selectedHero"></hero-detail>

[ChuangPoPO]

這段還是不知道怎麼運作的><

  ngOnInit(): void{
        this.route.params
        .switchMap((params:Params) => this.heroService.getHero(+params['id']))
        .subscribe(hero => this.hero = hero); //印出來看看(params)=>{console.log(params['id'])...
  }

[ChuangPoPO]

12