允许从侧边栏组件进行主导航路由

时间:2016-10-29 12:08:49

标签: angular components angular2-routing

我正在尝试使用侧边栏和router-outlet将居住的主要舞台区域设置我的布局。我想让我的侧边栏成为一个可以保存导航的组件,但是我遇到了一个问题,因为现在我的菜单不起作用,如果我不使用组件并直接添加我的菜单,则菜单有效主AppComponent,但那不是我想做的。这就是我所拥有的:

sidebar.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-sidebar',
  template: `<div class="main-nav">
                <ul class="vertical-menu">
                  <li>
                    <a routerLink="notes" routerLinkActive="is-active">Notes</a>
                  </li>
                  <li>
                    <a routerLink="goals" routerLinkActive="is-active">Goals</a>
                  </li>
                </ul>
              </div>`
})
export class SidebarComponent { }

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-startup-science',
  template: `<app-sidebar></app-sidebar>
             <router-outlet></router-outlet>`
})
export class AppComponent { }

app.routes.ts

import { Routes } from '@angular/router';

// Components
import { AppComponent } from './containers/app.component';

export const routes: Routes = [
    { path: 'app', component: AppComponent },
];

0 个答案:

没有答案