在嵌套的@Routes - Angular 2 rc 1 - TypeScript中，從父2到父1的后退導航不起作用

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"} ）。