Как проехать изнутри внутреннего компонента в угловом 2?

Question

Так что я довольно новичок в Angular 2, я решил использовать его в одном из своих проектов с ним, чтобы познакомиться с ним. Поэтому мой сценарий таков: я пытаюсь создать одностраничное приложение панели мониторинга, и в настоящее время у меня есть 3 компонента: App, Sidebar и Navbar, а также мой MainPage (панель инструментов главной страницы моего сайта). По сути, мне нужно использовать [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] к компоненты. ROUTE_PROVIDERS должны быть добавлены только bootstrap(...)

Если добавить ROUTER_PROVIDERS к providers: [...] 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 самозагрузки() `, но нигде.