内側のコンポーネントから角度2でどのように配線するのですか？

Question

私はAngular 2をかなり新しくしています。私はそれを自分のプロジェクトに使って、それに精通しています。だから私のシナリオはこれです：私は単一ページのダッシュボードアプリケーションを作成しようとしており、現在はApp、Sidebar、Navbarの3つのコンポーネントと私のMainPage（私のサイトのメインページダッシュボードエリア）があります。基本的には、私のnavbarと私のサイドバーの両方から[routerLink]="['destination']"を使用する必要があり、アプリケーションコンポーネントの<router-outlet>を変更する必要があります。私は欠けていることが明らかな何かがあるように感じる。これをどうやって行うのですか？

app.component.ts

import {Component} from 'angular2/core'; 
import {RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from 'angular2/router'; 

import {NavbarComponent} from './navbar.component.ts' 
import {SidebarComponent} from './sidebar.component.ts' 
import {MainPageComponent} from './mainpage.component.ts' 

@Component({ 
selector: 'application', 
template: ` 
    <navbar></navbar> 
    <sidebar id="sidebar-wrapper"></sidebar> 

    <!-- I need to do this, but in the sidebar and navbar components --> 
    <a [routerLink]="['Home']">Home</a> 

    <button (click)="goBack()">Back</button> 
    <router-outlet></router-outlet> 
    `, 
    styleUrls: ['css/navigation.css'], 
    directives: [ROUTER_DIRECTIVES, NavbarComponent, SidebarComponent, MainPageComponent], 
    providers: [ROUTER_PROVIDERS] 
}) 

@RouteConfig([ 
    { 
     path: '/home', 
     name: 'Home', 
     component: MainPageComponent 
    } 
]) 

export class AppComponent { 
    goBack() { 
     window.history.back(); 
    } 
} 

Navbar.component.ts

import {Component} from 'angular2/core'; 
import {RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from 'angular2/router'; 

@Component({ 
    selector: 'navbar', 
    template: ` 
    <nav class="navbar navbar-default"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#mainNav" aria-expanded="false"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      </button> 

      <!-- Here's an example of what I mean. This doesn't actually do anything --> 
      <a class="navbar-brand navbar-center" [routerLink]="['Home']"><img src="img/logo.svg"/></a> 


     </div> 
     <div class="collapse navbar-collapse" id="mainNav"> 
      <ul class="nav navbar-nav navbar-left"> 
      <li><a href="#"><i class="fa fa-user"></i>This is you!</a></li> 
      </ul> 
      <ul class="nav navbar-nav navbar-right"> 
      <li><a href="#"><i class="fa fa-calendar"></i></a></li> 
      <li><a href="#"><i class="fa fa-exclamation-circle"></i></a></li> 
      <li><a href="#"><i class="fa fa-cog"></i></a></li> 
      </ul> 
     </div> 
    </nav> 

`, 
    styleUrls: ['css/navigation.css'], 
    directives: [ROUTER_DIRECTIVES], 
    providers: [ROUTER_PROVIDERS] 
}) 

export class NavbarComponent { } 

`

Answer 1

にproviders: [ROUTER_PROVIDERS]を追加しないでください：私のファイルは、現在、次のようになりコンポーネント。あなたはROUTER_PROVIDERSproviders: [...] of a component, new instances are maintained for this component and it's descendants, this breaks the connection to the global router (にROUTER_PROVIDERS added toブートストラップ（AppComponent、[ROUTER_PROVIDERS]）どこにも). The router is built in a way that it only works when provided globally only, therefor just add toブートストラップ（） ​​`しかしを追加した場合ROUTE_PROVIDERSはbootstrap(...)

に追加する必要があります。