如何從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_PROVIDERS已added to bootstrap（AppComponent，[ROUTER_PROVIDERS]） ). The router is built in a way that it only works when provided globally only, therefor just add to ). The router is built in a way that it only works when provided globally only, therefor just add to bootstrap（）中，而沒有其他地方。