How can I target router-outlet from a child component?

I have a left nav component that is imported into my main AppComponent. What I’m trying to implement is the ability to click a link in the left nav, and have it load a DataComponent in the router-outlet of the parent AppComponent.

My parent AppComponent looks like this:

import { LeftNavComponent } from 'app/left-nav/left-nav.component';
import { DataComponent } from 'app/data/data.component';

  selector: 'main',
  template: '<left-nav></left-nav><router-outlet></router-outlet>',
  directives: [ROUTER_DIRECTIVES, LeftNavComponent]  
  {path:'/data', name: 'Data', component: DataComponent}

My child LeftNavComponent that looks like this:

  selector: 'left-nav',
  directives: [ ROUTER_DIRECTIVES ],
  providers: [ ROUTER_PROVIDERS ],
  template: '<a [routerLink]="[ 'Data' ]">Show Me Data</a>'    

and the DataComponent I’m trying to load in the router-outlet looks like this:

  selector: 'data',
  templateUrl: 'This is where the data will be'

When I click the link, the url changes to /data, but it seems the DataComponent is not actually loaded because the ‘This is where the data will be’ text does not appear.

I’ve verified that the RouteConfig is working properly, since the text appears if I put the router-link in the AppComponent template, so the issue appears to be that the router-link is in the child component.

Any help would be awesome.

Leave a Reply

1 Comment threads
0 Thread replies
Most reacted comment
Hottest comment thread
1 Comment authors
Jason Recent comment authors
newest oldest most voted
Notify of

I think this is what you want:

template: '<a [routerLink]="[ '../Data' ]">Show Me Data</a>' 

or if it is a route on the root component:

template: '<a [routerLink]="[ '/Data' ]">Show Me Data</a>'