Angular 2 Routing in mehr als einer Komponente

Question

Ich habe eine App-Komponente, wo die Routen definiert sind und die <router-outlet></router-outlet> festgelegt ist. Ich habe auch eine Menükomponente, wo ich [routerLink] über die App-Routen einstellen möchte. Wie verknüpfe ich sie zusammen (Routen teilen)? App Komponente:

import {Component, View} from 'angular2/core'; 
import {ROUTER_PROVIDERS,RouteConfig} from 'angular2/router'; 
import {bootstrap} from 'angular2/platform/browser'; 
import {HomeComponent} from './../../components/home/home'; 
@Component({ 
    selector: 'app', 
    moduleId: module.id, 
    providers: [ 
     ROUTER_PROVIDERS 
    ] 
}) 
@View({ 
     templateUrl: 'app.html', 
     styleUrls: ['app.css'] 
}) 

@RouteConfig([ 
    { path: '/home', name: 'Home', component: HomeComponent, useAsDefault: true } 
]) 
class AppComponent { 

} 
bootstrap(AppComponent); 

Menü Komponente:

import {Component, View} from 'angular2/core'; 
import {bootstrap} from 'angular2/platform/browser'; 


@Component({ 
    selector: 'left-side-column', 
    moduleId: module.id, 
}) 
@View({ 
    templateUrl: 'left-side-column.html', 
    styleUrls: ['left-side-column.css'] 
}) 

class LeftSideColumnComponent { 

} 
bootstrap(LeftSideColumnComponent); 

Answer 1

Wenn Sie die Bootstrap-Funktion zweimal verwenden, erstellen Sie mehrere unabhängige Anwendungen.

Wenn Sie möchten, dass Ihr Menü Routen verwendet, die in der AppComponent definiert sind, müssen Sie die entsprechende Komponente in der App verwenden und mit dem Bootstrapping beginnen.

Etwas wie:

import { MenuComponent } from '...'; 

@Component({ 
    (...) 
    template: ` 
    <left-menu></left-menu> 
    <router-outlet></router-outlet> 
    ` , 
    directives: [ ROUTER_DIRECTIVES, MenuComponent ] 
}) 
export class AppComponent { 
} 

bootstrap(AppComponent, [ ROUTER_PROVIDERS ]);