Angular 2'de bir iç bileşen içinden nasıl geçiş yapılır?

Question

Bu yüzden Angular 2'ye oldukça yeni geldim, projelerin birinde bunlarla tanışmaya karar verdim. Yani benim senaryo şu: Tek sayfalık bir pano uygulaması yapmaya çalışıyorum ve şu anda 3 bileşenim var: App, Sidebar ve Navbar ve benim MainPage (sitemin ana sayfa gösterge paneli alanı). Esasen hem navbar'ım hem de kenar çubuğumdan [routerLink]="['destination']"'u kullanmam gerekiyor ve App bileşenindeki <router-outlet>'u değiştirmeniz gerekiyor. Eksik olduğum belli bir şey varmış gibi hissediyorum. Bunu yapmayı nasıl yaparım? Benim dosyaları şu anda şuna benzer:

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

için providers: [ROUTER_PROVIDERS] eklemeyin bileşenler. ROUTE_PROVIDERS sadece ROUTER_PROVIDERSproviders: [...] of a component, new instances are maintained for this component and it's descendants, this breaks the connection to the global router ( için ROUTER_PROVIDERS added to ön yükleme alanı eklerseniz (AppComponent [ROUTER_PROVIDERS],) bootstrap(...)

eklenen ). The router is built in a way that it only works when provided globally only, therefor just add to önyükleme() `ancak başka hiçbir yerde olmalıdır.