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.
