返回導航無法從父項2到父項1嵌套@Routes - Angular 2 rc 1 - TypeScript

Question

最初，AppComponent有2個父項@Routes（LoginComponent & TodosComponent）。 LoginComponent沒有嵌套@Routes，TodosComponent有2個嵌套@Routes。我已點擊href Todos鏈接進入todoslist頁面。我能夠使用瀏覽器後退按鈕導航回登錄頁面。如果通過點擊todoslist頁面進入todosdetail頁面，那麼我可以導航回todoslist頁面，但我無法使用瀏覽器後退按鈕導航回登錄頁面。

main.ts： -

import {bootstrap} from "@angular/platform-browser-dynamic"; 

import {ROUTER_PROVIDERS} from "@angular/router"; 

import {ROUTER_PROVIDERS as _ROUTER_PROVIDERS} from "@angular/router-deprecated"; 

import {Title} from "@angular/platform-browser"; 

import {HTTP_PROVIDERS} from "@angular/http"; 

import {AppComponent} from "./app.component"; 

import {MyService} from "./services/home"; 

bootstrap(AppComponent, [ROUTER_PROVIDERS, _ROUTER_PROVIDERS, Title, HTTP_PROVIDERS, MyService]); 

home.ts（爲MyService）： -

import {Injectable, EventEmitter} from "@angular/core"; 
import {Subject} from "rxjs/Subject"; 

export class Todos{ 
    constructor(public id: number | string){ 

    } 
} 

@Injectable() //used for injecting Http or other predefined services for the following class 
export class MyService{ 
    loginEmitter: EventEmitter<any> = new EventEmitter() 

    stopTimerSource = new Subject() 
    stopTimer$ = this.stopTimerSource.asObservable() 
    constructor(){ 

    } 
    loginEmitInit(){ 
     return this.loginEmitter; 
    } 
    loginEmit(data){ 
     this.loginEmitter.emit(data); 
    } 
    stopTimer(){ 
     this.stopTimerSource.next(""); 
    } 
} 

app.component.ts： -

import {Component, ViewChild} from "@angular/core"; 
import {ROUTER_DIRECTIVES, Routes, Router} from "@angular/router"; 
import {Router as _Router} from "@angular/router-deprecated"; 
import {Http} from "@angular/http"; 
import {Location} from "@angular/common"; 
import {Title} from "@angular/platform-browser"; 

import {LoginComponent} from "./components/login"; 
import {TodosComponent} from "./components/todos"; 

import {MyService} from "./services/home"; 

@Component({ 
    selector: "my-app", 
    template: "<a [routerLink]="['/login']">Login</a>" + 
       "<a [routerLink]="['/todos']">Todos</a>" + 
       "<router-outlet></router-outlet>", 
    directives: [ROUTER_DIRECTIVES] 
}) 

@Routes([ 
    {path: "/login", component: LoginComponent}, 
    {path: "/todos", component: TodosComponent}, 
    {path: "*", component: LoginComponent}, 
]) 

export class AppComponent { 
    loginSubscription: any 
    constructor(myService: MyService){ 
     this.loginSubscription = myService.loginEmitInit().subscribe(function (data) { 
      //do something 
     }); //event emit subscription 
    } 
} 

個login.ts（LoginComponent）： -

import {Component} from "@angular/core"; 
import {Router} from "@angular/router"; 

import {MyService} from "../services/home"; 

@Component({ 
    template: "<span>Login</span>", 
    directives: [] 
}) 

export class LoginComponent { 
    stopTimerSubscription: any 
    constructor(private router: Router, private myService: MyService){ 
     this.stopTimerSubscription = myService.stopTimer$.subscribe(()=>{ 
      //do something 
     }); 
    } 
    ngOnDestroy(){ 
     this.stopTimerSubscription.unsubscribe(); 
    } 
} 

todos.ts（TodosComponent）： -

import {Component} from "@angular/core"; 
import {ROUTER_DIRECTIVES, Routes} from "@angular/router"; 

import {TodosListComponent} from "../components/todoslist"; 
import {TodosDetailComponent} from "../components/todosdetail"; 

@Component({ 
    template: "<router-outlet></router-outlet>", 
    directives: [ROUTER_DIRECTIVES] 
}) 

@Routes([ 
    {path: "", component: TodosListComponent}, 
    {path: "/:id", component: TodosDetailComponent}, 
]) 

export class TodosComponent {} 

todoslist.ts（TodosListComponent）： -

import {Component} from "@angular/core"; 
import {Router, RouteSegment} from "@angular/router"; 

import {Todos} from "../services/home"; 

@Component({ 
    template: "<span (click)='onTodosDetailNav()'>Todos List</span>", 
    directives: [] 
}) 

export class TodosListComponent { 
    constructor(){private router: Router} 
    routerOnActivate(curr, prev, currTree, prevTree){ 
     let selectedId = +currTree.parent(curr).parameters.id; 
    } 
    routerCanDeactivate(curr, next){ 
     return true; //return false to cancel navigation to next page 
    } 
    onTodosDetailNav(){ 
     this.router.navigateByUrl("/todos/1"); 
    } 
} 

todosdetail.ts（TodosDetailComponent）： -

import {Component} from "@angular/core"; 
import {Router} from "@angular/router"; 

import {Todos} from "../services/home" 

@Component({ 
    template: "<h1>{{todosDetail.id}}</h1>" + 
       "<button (click)='goBack()'>Go Back</button>"  
}) 

export class TodosDetailComponent{ 
    todosDetail:Todos 
    constructor(private router: Router){ 
     this.todosDetail = {id:"1"}; 
    } 
    goBack(){ 
     this.router.navigate(['/todos', {id:this.todosDetail.id, foo:"foo"}]); //sending query parameters in url path 
    } 
} 

有人可以幫我解決這個問題嗎？提前致謝。

Answer 1

我覺得經過id應該以這種方式工作

goBack(){ 
    this.router.navigate(['/todos', this.todosDetail.id, {foo:"foo"}]);   
} 

但查詢參數（{foo:"foo"}）尚不支持在新的路由器據我所知。