Routing redirecting to root

Question

I am trying to route using Router.navigate method. I followed the instructions to the letter, but when I route via API, its reloading the root page.

In my RootComponent I am trying to use

this._router.navigate(['ABC', 'Page1']); which should redirect me to application/abc/xyz

But if I directly visit application/abc/xyz through my browser, it is working seamlessly

app.component.ts

import {Component} from "angular2/core";
import {RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS} from "angular2/router";
import {RootComponent} from "./components/root.component";
import {Page1Component} from "./components/page1.component";


@Component({
    selector: 'app',
    template: '<router-outlet></router-outlet>',
    directives: [ROUTER_DIRECTIVES],
    providers: [
        ROUTER_PROVIDERS
    ]
})

@RouteConfig([
    {
        path: '',
        name: 'Root',
        component: RootComponent,
        useAsDefault: true
    },
    {
        path: '/abc/...',
        name: 'ABC',
        component: ABCComponent
    }
])

export class AppComponent {
}

ABCComponent

@Component({
    selector: 'abc',
    template: '<router-outlet></router-outlet>',
    directives: [ROUTER_DIRECTIVES]
})

@RouteConfig([
    {
        path: '/xyz',
        name: 'Page1',
        component: Page1Component
    }
])
export class ABCComponent{

    constructor(private _router:Router){
    }

}

Page1Component

import {Component} from "angular2/core";
import {Router} from "angular2/router";

@Component({
    selector: 'page1',
    template: '<h1>Page1</h1>'
})

export class Page1Component{

    constructor(private _router:Router){
    }
}

What am I doing wrong?

EDIT

To explain it even simpler terms

                              Application (2 routes at root level)
                                  |                        |
           Default ("/") - Root Component              /abc/ ABC Component
                                                           |
                                                       /abc/xyz Page1 Component

What I am trying to do is, navigate to Page1 from Root Component.

Solution

After Reverse enineering from S.alem plunkr, here is the solution

http://plnkr.co/edit/F1p6aQNJ7lREHCiVnKEP?p=preview

Answer 1

Try using the main router (router of the AppComponent). You can get it with such a method:

getMainRouter(router?: Router):Router {
  if (router.parent === null) {
    return router;
  }
  return this.getMainRouter(router.parent);
}

So your RootComponent can be something like this:

// imports...

@Component({
    selector: 'root',
    template: '<h1>Root Component</h1>'
})

export class RootComponent{

    private _mainRouter: Router;

    constructor(private _router:Router){
        this._mainRouter = this.getMainRouter(this._router);
    }

    routeToSomewhere():void {
        this._mainRouter.navigate(['./ABC', 'Page1']);
    }

    private getMainRouter(router?: Router):Router {
        if (router.parent === null) {
            return router;
        }
        return this.getMainRouter(router.parent);
    }
}

Here is a plunker to show. I forked the Hero Tutorial, but you can see the related codes if you fallow the route config of AppComponent. Launch the plunker on a separate window to see the browser url.

Answer 2

Actually router is following your configuration. You have configured 2 paths:

• / - mapped to RootComponent
• /abc/xyz - mapped to Page1Component This components are considered to be on the same level of hierarchy. So components replace each other during navigation.

You need to use child routers and non-terminal routes if you want to have nested components. Check this question.