Router link in child component

Issue

I have a RouteConfig in my top level app component defined like this:

@RouteConfig(const [
  const Route(path: '/admin', name: 'AdminSite', component: AdminSite),
  const Route(path: '/', name: 'ManagerSite', component: ManagerSite, useAsDefault: true),
])

And I have a child component that should hold the navigation links. I define the child component and in the template I used:

  <nav>
    <a *ngIf="authService.user?.is_admin" [routerLink]="['AdminSite']">Admin</a>
    <a [routerLink]="['ManagerSite']">Home</a>
  </nav>

If I put the links in the app component, everything works fine, but if I move them to the child component, the url in the browser address line updates when I click the link, but the router outlet doesn’t change.

I searched through the docs but I can’t figure out whats wrong. Can someone please explain what’s going on?

Solution

If you miss the following in child components, moving the <a>(anchor) tags won’t work.

• import ROUTER_DIRECTIVES

  import {RouteConfig, RouterOutlet, ROUTER_DIRECTIVES} from 'angular2/router';

• Give the correct path to below

  <a *ngIf="authService.user?.is_admin" [routerLink]="['AdminSite']">Admin</a>
<a [routerLink]="['ManagerSite']">Home</a>

something like this ['./ManagerSite'] or ['./AdminSite']

Working plunker

In that plunker check this file app/crisis-center/crisis-center.component.ts

Answered By – Mr_Perfect

Answer Checked By – Marie Seifert (FlutterFixes Admin)