Zurück Navigation funktioniert nicht von Parent 2 zu Parent 1 in Nested @Routes - Angular 2 RC 1 - TypeScript

Question

Die AppComponent hat zunächst 2 Eltern (LoginComponent & TodosComponent). LoginComponent hat keine verschachtelte @Routes, TodosComponent hat 2 verschachtelte @Routes. Ich bin zur Todo-Liste gegangen, indem ich auf href Todos Link klicke. Ich bin in der Lage, zurück zu navigieren, indem ich die Browser-Zurück-Taste zur Anmeldeseite benutze. Wenn ich auf die todosdetail Seite gehe, indem ich auf die todoslist Seite klicke, kann ich wieder zur todoslist Seite zurückkehren, aber ich bin nicht in der Lage mit der browser back Taste zurück zur Login Seite zu navigieren.

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 
    } 
} 

Kann mir jemand helfen, dieses Problem zu lösen? Danke im Voraus.

Answer 1

Ich denke, die id vorbei sollte auf diese Weise arbeiten

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

aber Abfrageparameter ({foo:"foo"}) sind noch nicht in der neuen Router unterstützt, soweit ich weiß.