Having One Component Route a Sibling

1
votes

I'm looking at an Angular2 app with three top-level components. The bootstrapped app component has a header, a sidebar, and a router-outlet forming the main body of the page. I want the header and sidebar to be permanent features of the app, and use the router to control what's displayed in the body.

<div>
  <app-header></app-header>
</div>

<div>
  <app-sidebar></app-sidebar>
</div>

<div>
  <router-outlet></router-outlet>
</div>

So I'm looking for the sidebar to be able to implement...

<p><a [routerLink]="['/thing1']">Sidebar -> thing1</a></p>

<p><a [routerLink]="['/thing2']">Sidebar -> thing2</a></p>

... and have the router show this component or that component in the designated part of the page. It's very unclear to me what levels of the app need any of Router, RouteConfig, ROUTER_DIRECTIVES. I've added the thing1/thing2 routes with angular-cli's scaffolding, and the app at least compiles if I don't include the routerLink directives -- the @Routes seem valid and everything loads.

Is there a better way to do what I'm trying to do?

2
angular

2 Answers

0
votes

You need

  • @Routes() on every component that contains an <router-outlet></router-outlet> (@RouteConfig() in router-deprecated or Angular2 beta)
  • provide: [ROUTER_DIRECTIVES] on any component that uses <a [routerLink] ... or <router-outlet></router-outlet>
  • Router when you want to navigate imperatively (this.router.navigateXxx()) or use other features of the Router class

If HTML above is in one view then 

<p><a [routerLink]="['thing1']">Sidebar -> thing1</a></p>
<p><a [routerLink]="['thing2']">Sidebar -> thing2</a></p>

should work with the new RC.1 router. If thing1 and thing2 are top-level routes prefixing the path with / also works (same for below example)

For the router-deprecated you would need something like

<p><a [routerLink]="['Thing1']">Sidebar -> thing1</a></p>
<p><a [routerLink]="['Thing2']">Sidebar -> thing2</a></p>

where ThingX is the name of the route.

(not sure because the information you provided

0
votes

Look up named outlets:

http://vsavkin.tumblr.com/post/145672529346/angular-router

instead of <app-sidebar></app-sidebar> you would use: <router-outlet name="sidebar"></router-outlet>

then in your route path:

{
    path: 'thing1',
    component: Thing1Component,
    outlet: 'sidebar'
}