Angular2: How to link directly from the root view to a (grand)child view

Question

I am experimenting with Angular 2 and have come across a problem I'm not sure how to debug.

Example situation

I have an AppComponent that handles all the base level routing, and each 'level' of routing down is declared on a new router for that level.

I have the following routes:

/home , defined on AppComponent
/applications , defined on AppComponent
/applications/new , defined on ApplicationRouterComponent
/applications/foo , defined on ApplicationRouterComponent

As part of the surrounding template, there is a nav bar that is common to all pages and so needs to be able to link to any routes defined in child routers. [routerLink]ing to a nested component doesn't cause any errors to be thrown.

Problem

When linking to a grandchild route, it doesn't appear that the View component is even constructed. i.e.,

<a [routerLink]="['./ApplicationRouter/New']">New Application</a>

The ApplicationRouterComponent gets constructed and displayed, but the NewApplication component does not.

Code Sample

appComponent.ts

import {Component} from 'angular2/core';
import {
  RouteConfig,
  ROUTER_DIRECTIVES,
  ROUTER_PROVIDERS
} from 'angular2/router';
import {ApplicationRouterComponent} from './routes/application/applicationRouter';
import {HomeComponent} from './routes/home/homeComponent';

@Component({
  selector: 'bop-application',
  templateUrl: 'app/index.html',
  directives: [ROUTER_DIRECTIVES],
  providers: [ROUTER_PROVIDERS],
})
@RouteConfig([
    { path: '/home', name: 'Home', component: HomeComponent, useAsDefault: true },
    { path: '/applications/...', name: 'ApplicationRouter', component: ApplicationRouterComponent }
])
export class AppComponent { }

./app/routes/application/applicationRouter

import {Component} from 'angular2/core';
import {
  RouteConfig,
  ROUTER_DIRECTIVES,
  ROUTER_PROVIDERS
} from 'angular2/router';
import {NewApplicationComponent} from './new/newApplicationComponent';
import {FooComponent} from './new/foo';

@Component({
  selector: 'application-router',
  templateUrl: 'app/routes/application/index.html',
  directives: [ROUTER_DIRECTIVES],
  providers: [ROUTER_PROVIDERS],
})
@RouteConfig([
  { path: '/new', name: 'New', component: NewApplicationComponent},
  { path: '/foo', name: 'Foo', component: FooComponent},
])
export class ApplicationRouter {
  constructor() {
    debugger;
  }
}

./app/index.html

<h1>Portal</h1>
<nav>
    <a [routerLink]="['Home']">Home</a>
    <a [routerLink]="['./ApplicationRouter/New']">New Application</a>
</nav>
<router-outlet></router-outlet>

./app/application/index.html

Application Router
<router-outlet></router-outlet>

./app/application/new/new.html

<h4>New View</h4>

Günter Zöchbauer Günter Zöchbauer · Accepted Answer · 2016-04-07T09:54:35

The router link should be

<a [routerLink]="['/ApplicationRouter', 'New']">New Application</a>

A router link takes a list of route names, not a path. There are some characters supported that are interpreted like in a path

/xxx for starting at root router
.. for starting at the parent router
./xxx for current router (AFAIK redundant)

Angular2: How to link directly from the root view to a (grand)child view

1 Answers