Back navigation not working from Parent 2 to Parent 1 in Nested @Routes - Angular 2 rc 1 - TypeScript

Question

The AppComponent has 2 Parent @Routes(LoginComponent & TodosComponent) initially. LoginComponent has no nested @Routes, TodosComponent has 2 nested @Routes. I have gone to todoslist page by clicking on href Todos link. I am able to navigate back using browser back button to login page. If I will go to todosdetail page by clicking on todoslist page, after that I am able to navigate back to todoslist page, but I am not able to navigate back to login page using browser back button.

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

Can someone help me to solve this issue? Thanks in advance.

Answer 1

I think passing the id should work this way

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

but query parameters ({foo:"foo"}) are not yet supported in the new router as far as I know.