Wie wird in Angular 2 von einer inneren Komponente aus geroutet?

Question

Also ich bin ziemlich neu in Angular 2, ich entschied mich, es in einem meiner Projekte damit zu verwenden, um mich damit vertraut zu machen. Also mein Szenario ist das: Ich versuche, eine einseitige Dashboard-Anwendung zu machen, und ich habe derzeit 3 ​​Komponenten: App, Sidebar und Navbar, und meine MainPage (der Hauptseite Dashboard-Bereich meiner Website). Im Wesentlichen muss ich [routerLink]="['destination']" von meiner Navbar und von meiner Seitenleiste verwenden und es muss die <router-outlet> auf der App-Komponente ändern. Ich habe das Gefühl, dass etwas offensichtlich ist, dass ich vermisse. Wie gehe ich dabei vor? Meine Dateien wie folgt aussehen zur Zeit:

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

Fügen Sie nicht providers: [ROUTER_PROVIDERS] zu Komponenten. ROUTE_PROVIDERS sollte nur auf bootstrap(...)

hinzugefügt werden Wenn Sie 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 Bootstrap hinzufügen (AppComponent, [ROUTER_PROVIDERS]) ). The router is built in a way that it only works when provided globally only, therefor just add to Bootstrap() `aber nirgendwo anders.