2016-04-02 13 views
0

ルートが定義されているアプリケーションコンポーネントがあり、<router-outlet></router-outlet>が設定されています。私はまた、アプリケーションルートを使って[routerLink]を設定したいメニューコンポーネントを持っています。それらの購入をリンクするにはどうすればよいですか(ルートを共有する)。 アプリケーションコンポーネント:2つ以上のコンポーネントで角度2のルーティング

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); 

メニューコンポーネント:

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); 

答えて

1

あなたが二回ブートストラップ機能を使用すると、あなたはいくつかの独立したアプリケーションを作成します。

メニューにAppComponentで定義されたルートを使用するには、対応するコンポーネントをアプリケーションに使用してブートストラップする必要があります。以下のような

何か:

import { MenuComponent } from '...'; 

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

bootstrap(AppComponent, [ ROUTER_PROVIDERS ]); 
+0

は、だから私は、アプリケーションのコンポーネントをインポートし、アプリのコンポーネントを使用してブートストラップを作成します。それとも、角度と角度2のエコシステムが新しくなったので、私に例を挙げてください。 – Moddinu

関連する問題