嵌套@Routes 中从父级 2 到父级 1 的后退导航不起作用 - Angular 2 rc 1 - TypeScript

Question

AppComponent 最初有 2 个 Parent @Routes(LoginComponent & TodosComponent)。 LoginComponent 没有嵌套 @Routes，TodosComponent 有 2 个嵌套 @Routes。我通过单击 href Todos link 进入了 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(我的服务):-

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(登录组件):-

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

嵌套@Routes 中从父级 2 到父级 1 的后退导航不起作用 - Angular 2 rc 1 - TypeScript

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

angular2-routing

angular