如何从 Angular 2 的内部组件中路由？

Question

所以我对 Angular 2 还很陌生，我决定在我的一个项目中使用它来熟悉它。所以我的场景是这样的：我正在尝试制作一个单页仪表板应用程序，我目前有 3 个组件：App、Sidebar 和 Navbar，以及我的 MainPage（主页仪表板我网站的区域）。本质上，我需要在导航栏和侧边栏中使用[routerLink]="['destination']"，它需要更改App 组件上的<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_PROVIDERSadded tobootstrap(AppComponent, [ROUTER_PROVIDERS])). The router is built in a way that it only works when provided globally only, therefor just add tobootstrap()` 但没有其他地方。