如何在Angular 2中从内部零部件中布线

所以我对Angular 2还很陌生，我决定在我的一个项目中使用它来熟悉它。所以我的场景是：我正在尝试制作一个单页仪表板应用程序，目前我有三个组件：App、Sidebar和Navbar，以及我的MainPage（我的网站的主页面仪表板区域）。本质上，我需要从导航栏和侧边栏中使用[routerLink]="['destination']"，并且需要更改应用程序组件上的<router-outlet>。我觉得我明显错过了一些东西。我该怎么做？我的文件当前如下：

应用程序组件.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();
    }
}

导航栏组件.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 { }

`