Fatal编程技术网
  • angular/
  • 在嵌套的@Routes-Angular 2 rc 1-TypeScript中，从父级2到父级1的反向导航不起作用

在嵌套的@Routes-Angular 2 rc 1-TypeScript中，从父级2到父级1的反向导航不起作用

angular

在嵌套的@Routes-Angular 2 rc 1-TypeScript中，从父级2到父级1的反向导航不起作用,angular,angular2-routing,Angular,Angular2 Routing,AppComponent最初有两个父级路由（LoginComponent和ToDoComponent）。LoginComponent没有嵌套的@路由，ToDoComponent有2个嵌套的@路由。我通过点击hrefTodos链接进入TODOLIST页面。我可以使用浏览器返回按钮返回登录页面。如果我通过单击todoslist页面进入todosdetail页面，之后我可以导航回todoslist页面，但无法使用浏览器后退按钮导航回登录页面 main.ts:- import {bootstrap} f

AppComponent最初有两个父级路由（LoginComponent和ToDoComponent）。LoginComponent没有嵌套的
@路由
，ToDoComponent有2个嵌套的
@路由
。我通过点击
href
Todos链接进入TODOLIST页面。我可以使用浏览器返回按钮返回登录页面。如果我通过单击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]);

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("");
    }
}

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

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();
    }
}

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

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

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
    }
}
home.ts（MyService）：-

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]);

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("");
    }
}

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

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();
    }
}

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

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

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

从“@angular/core”导入{Injectable，EventEmitter}；
从“rxjs/Subject”导入{Subject}；
导出类待办事项{
构造函数（公共id:编号|字符串）{
}
}
@Injectable（）//用于为以下类注入Http或其他预定义服务
导出类MyService{
loginEmitter:EventEmitter=neweventemitter（）
stopTimerSource=新主题（）
stopTimer$=this.stopTimerSource.asObservable（）
构造函数（）{
}
loginEmitInit（）{
返回此.loginEmitter；
}
loginEmit（数据）{
this.loginEmitter.emit（数据）；
}
停止计时器（）{
this.stopTimerSource.next（“”）；
}
}
app.component.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]);

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("");
    }
}

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

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();
    }
}

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

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

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

从“@angular/core”导入{Component，ViewChild}；
从“@angular/ROUTER”导入{ROUTER_指令、路由、路由器}”；
从“@angular/Router deprecated”导入{Router as_Router}”；
从“@angular/Http”导入{Http}；
从“@angular/common”导入{Location}”；
从“@angular/platform browser”导入{Title}”；
从“/components/login”导入{LoginComponent}；
从“/components/todos”导入{TODOComponent}；
从“/services/home”导入{MyService}；
@组成部分({
选择器：“我的应用程序”，
模板：“登录”+
“待办事项”+
"",
指令：[路由器指令]
})
@路线([
{路径：“/login”，组件：LoginComponent}，
{路径：“/todos”，组件：TODOComponent}，
{路径：“*”，组件：LoginComponent}，
])
导出类AppComponent{
登录订阅：任何
构造函数（myService:myService）{
this.loginSubscription=myService.loginEmitInit（）.subscribe（函数（数据）{
//做点什么
})；//事件发出订阅
}
}
login.ts（LoginComponent）：-

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]);

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("");
    }
}

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

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();
    }
}

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

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

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

从“@angular/core”导入{Component}；
从“@angular/Router”导入{Router}”；
从“./services/home”导入{MyService}；
@组成部分({
模板：“登录”，
指令：[]
})
导出类登录组件{
StopTimer订阅：任何
构造函数（专用路由器：路由器，专用myService:myService）{
this.stopTimerSubscription=myService.stopTimer$.Subscription（（）=>{
//做点什么
});
}
恩贡德斯特罗（）{
this.stopTimerSubscription.unsubscribe（）；
}
}
todos.ts（TodosComponent）：-

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]);

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("");
    }
}

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

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();
    }
}

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

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

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

从“@angular/core”导入{Component}；
从“@angular/ROUTER”导入{ROUTER_指令，Routes}”；
从“./components/todoList”导入{todoListComponent}；
从“./components/todosdetail”导入{TodosDetailComponent}；
@组成部分({
模板：“”，
指令：[路由器指令]
})
@路线([
{path:，组件：todoListComponent}，
{路径：“/：id”，组件：TodosDetailComponent}，
])
将类导出到组件{}
todoList.ts（todoListComponent）：-

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]);

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("");
    }
}

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

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();
    }
}

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

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

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

从“@angular/core”导入{Component}；
从“@angular/Router”导入{Router，RouteSegment}；
从“./services/home”导入{Todos}；
@组成部分({
模板：“待办事项列表”，
指令：[]
})
导出类ToDoListComponent{
构造函数（）{专用路由器：路由器}
路由激活（当前、上一个、当前树、当前树）{
让我们选择edid=+currTree.parent（curr.parameters.id）；
}
routerCanDeactivate（当前，下一个）{
return true；//返回false取消导航到下一页
}
onTodosDetailNav（）{
这个.router.navigateByUrl（“/todos/1”）；
}
}
todosdetail.ts（TodosDetailComponent）：-

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]);

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("");
    }
}

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

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();
    }
}

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

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

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

从“@angular/core”导入{Component}；
从“@angular/Router”导入{Router}”；
从“./services/home”导入{Todos}
@组成部分({
模板：“{{todosDetail.id}}”+
“回去”
})
导出类TodosDetailComponent{
待办事项详情：待办事项
构造函数（专用路由器：路由器）{
this.todosDetail={id:“1”}；
}
戈巴克（）{
this.router.navigate（['/todos'，{id:this.todosDetail.id，foo:“foo”}]）；//在url路径中发送查询参数
}
}
有人能帮我解决这个问题吗？提前谢谢。

我认为传递
id
应该是这样的

goBack(){
    this.router.navigate(['/todos', this.todosDetail.id, {foo:"foo"}]);         
}
但据我所知，新路由器还不支持查询参数（
{foo:foo}
）。

我认为传递
id应该是这样的


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



但据我所知，新路由器还不支持查询参数（
{foo:“foo”}
）。
请在此处发布代码并删除到Dropbox的链接。@JonathanEustace发布了代码。你能检查一下并给出解决方案吗？请在这里发布代码并删除Dropbox的链接。@JonathanEustace发布了代码。你能检查一下并给我答案吗？我试过用这个。返回时，我需要选择待办事项列表内容。所以我要传递查询参数。我有一个详细的网址。如果我传递
this.router.navigate（['/todos'，this.todosDetail.id，{foo:“foo”}]）
并单击todos detail中的返回按钮，我会得到url。现在，如果我单击browser back按钮，它将（仍处于待办事项详细信息中）。这是因为我在路由中配置为
“/：id”
。这是一个问题还是一些反馈？对不起，我不知道该怎么处理这个评论。我已经试过你的评论了，但是我被打断了