链接在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>)

这是imports-array中的设置。

我在下面分享我的代码供参考： - （我正在使用bootstrap 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>

继承我的输出截图：