Angular2中的链接不可点击

Question

我有一个 angular2 组件：

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

@Component({
selector: 'sidenav',
templateUrl: './sidenav.html',
styleUrls: ['./sidenav.scss'],

})
export class SidenavComponent {

constructor() {

}
}

我想将它包含在另一个组件中，除了链接不起作用之外，它工作正常：

 <li><a routerLink="/portfolio">Portfolio</a></li>

我只是用标签包含组件

<sidebar> </sidebar>

缺少的部分是什么。我包括了路由器，但它没有帮助。

我使用生成的 jhipster 应用程序，并且只想为授权用户添加 sidenav。定义了许多模块和路由，包括彼此，但我只是找不到正确的方法。

Answer 1

我只是用标签包含组件

<sidebar> </sidebar>

不应该是<sidenav> </sidenav>吗？

Answer 2

也许你没有正确使用 RouterModule？

RouterModule.forRoot(<urRouteDataStructure>)

这是导入数组中的设置。

我在下面分享我的代码以供参考：- （我使用的是引导程序 3.x）

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { ServerComponent } from './server/server.component';

... ...
从'@angular/router'导入{Routes, RouterModule}；

const appRoutes: Routes = [
  {    path:'server',
      component: ServerComponent
  }
];

@NgModule({
  declarations: [
    AppComponent,
    ServerComponent,
    BasicHighlightDirective,
    BetterHighlightDirective,
    UnlessDirective
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    RouterModule.forRoot(appRoutes)
  ],
  providers: [LoggingService, AccountsService],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html

<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <ul class="nav nav-tabs">

        <!-- <li role="presentation"><a href="/serv"> Server Comp </a> </li> -->
        <li role="presentation"><a routerLink="/server"> Server Comp </a> </li>
        <li role="presentation"><a routerLink="/">  Home Comp</a></li>

      </ul>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-12">
      <router-outlet></router-outlet>

    </div>
  </div>
</div>

这是我的输出截图：