Mit einer Komponente Route ein Geschwister

Question

Ich bin auf eine Angular2 App mit drei Top-Level-Komponenten. Die Bootstrap-App-Komponente hat eine Kopfzeile, eine Seitenleiste und eine Router-Outlet, die den Hauptteil der Seite bilden. Ich möchte, dass die Kopfzeile und die Seitenleiste permanente Funktionen der App sind, und verwende den Router, um zu steuern, was im Body angezeigt wird.

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

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

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

Also für die Sidebar Ich suche der Lage sein, benannt zu implementieren ...

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

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

... und haben die Router zeigen diese Komponente oder diese Komponente in der Teil der Seite. Es ist mir sehr unklar, welche Level der App Router, RouteConfig, ROUTER_DIRECTIVES benötigen. Ich habe die ding1/ding2 routes mit angle-cli's scaffolding hinzugefügt, und die App kompiliert zumindest, wenn ich die routerLink-Direktiven nicht einschließe - die @Routes scheinen gültig und alles wird geladen.

Gibt es einen besseren Weg zu tun, was ich versuche zu tun?

Answer 1

Sie benötigen

• @Routes() auf jeder Komponente, die eine <router-outlet></router-outlet> (@RouteConfig() in router-deprecated oder Angular2 beta) enthält
• provide: [ROUTER_DIRECTIVES] auf Komponenten, die <a [routerLink] ... oder <router-outlet></router-outlet>
• Router verwendet, wenn Sie unbedingt navigieren möchten (this.router.navigateXxx()) oder andere Merkmale der Router Klasse
verwenden

Wenn HTML oben in einer Ansicht ist dann

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

sollte mit den neuen RC.1 Router arbeiten. Wenn thing1 und thing2 sind Top-Level-Routen den Weg mit / prefixing auch funktioniert (gleiche gilt für nachstehendes Beispiel)

für den Router-deprecated Sie wäre so etwas wie

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

müssen, wo ThingX ist der Name die Route.

(nicht sicher, weil die Informationen, die Sie

Answer 2

Blick nach oben benannten Auslässe:

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

von <app-sidebar></app-sidebar> stattdessen verwenden Sie: <router-outlet name="sidebar"></router-outlet>

dann in Ihre Route Pfad:

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