Angular 2 RC1 Child Routing

Question

Currently I am able to handle basic cases of routing using Angular 2 RC1, such as main component with few links, clicking on them render contents in main router outlet.

Similarly, clicking link in child component renders its child component in child component router outlet.

What I am not being able to accomplish is the case where I need to render a child component in the, main outlet of the application.

My url structure is as follows:

/account/user/
/account/user/profile/
/account/user/otherfeature/

/account/admin/
/account/admin/somefeature
/account/admin/anotherfeature

I have the below code, which when run displays a homepage, with links to

User Account: points to, /account/user/
Admin: points to /account/admin/
User Profile: points to /account/user/profile/

Clicking on the above links renders contents in router outlet of the App Component except the Profile link. When I click the Profile link,the link does work but it renders the profile component under the user account page (as a sub section), what I want is that clicking Profile link should render contents in the main router outlet i.e. router outlet of App Component.

Another issue, currently I have to add a account component, otherwise the router doesn't allow urls with "account" word in it. Is there any way to have some prefix attached to urls without mapping it to a component. As per my understanding current router chop ups the url in url segment and try to map account portion of the url to a component therefore I must have a component for this. Please advice any better way to achieve this.

App component:

import {Component, OnInit} from '@angular/core';
import {Routes, Router, ROUTER_DIRECTIVES, ROUTER_PROVIDERS} from '@angular/router';

import {AccountComponent} from './account.component';

@Component({
    selector: 'app',
    template: `
        <a href="/index.html">Home</a> |
        <a [routerLink]="['./account/user/']">User Account</a> |
        <a [routerLink]="['./account/user/profile/']">Profile</a> |
        <a [routerLink]="['./account/admin/']">Admin Account</a> |

        <router-outlet></router-outlet>
    `,
    directives: [ROUTER_DIRECTIVES],
    providers: [ROUTER_PROVIDERS]
})
@Routes([
    { path: '/account', component: AccountComponent },
])
export class AppComponent {
    constructor(private router: Router) {
    }
}

Account Component:

import { Component } from '@angular/core';
import { Routes, Router, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from '@angular/router';
import { UserAccountComponent } from './user/user-account.component';
import { AdminAccountComponent } from './admin/admin-account.component';

@Component({
    template: '<router-outlet></router-outlet>',
    directives: [ROUTER_DIRECTIVES]
})
@Routes([
    { path: '/user', component: UserAccountComponent },
    { path: '/admin', component: AdminAccountComponent }
])
export class AccountComponent {

    constructor() { }

}

User Account Component:

import { Component } from '@angular/core';
import { Routes, Router, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from '@angular/router';
import { ProfileComponent } from './profile.component';

@Component({
    template: `
        <h1>User Account</h1>
        <a [routerLink]="['./profile']">Profile</a>
        <router-outlet></router-outlet>
    `,
    directives: [ROUTER_DIRECTIVES]
})
@Routes([
        { path: '/profile', component: ProfileComponent },
])
export class UserAccountComponent {

    constructor() { }
}

Profile Component

import { Component } from '@angular/core';

@Component({
    template: `
        <h1>Profile</h1>
    `,
})
export class ProfileComponent {

  constructor() {}

}

The routing for angular rc1 is still not documented, even the official examples use the deprecated @angular/routing-deprecated, which has plenty of examples on child routing. — fredrik

Günter Zöchbauer Günter Zöchbauer · Accepted Answer · 2016-05-23T17:38:13

what I want is that clicking Profile link should render contents in the main router outlet i.e. router outlet of App Component.

Then the AppComponent needs to contain a route with the path you use in the routerLink

@Component({
    selector: 'my-app',
    styles: [':host { display: block; border: solid 3px red;}'],
    template: `
        <!--<a href="/index.html">Home</a> |-->
        <a [routerLink]="['./account/user/']">User Account</a> |
        <a [routerLink]="['/account/user/profile/']">Profile</a> |
        <a [routerLink]="['./account/admin/']">Admin Account</a> |

        <router-outlet></router-outlet>
    `,
    directives: [ROUTER_DIRECTIVES],
    providers: [ROUTER_PROVIDERS]
})
@Routes([
    { path: '/account/user', component: UserAccountComponent },
    { path: '/account', component: AccountComponent },
])
export class App {
    constructor(private router: Router) {}
}

Currently the order of routes is significant. The more significant routes need to come first. In this case the reverse order would never find /account/user because /account would match all routes that start with /account.

Plunker example

Angular 2 RC1 Child Routing

1 Answers