配置angular2应用程序导航和路由时出错

尝试使用angular2使用AngularCLI创建应用程序时，我遇到以下问题： 我想配置导航和路由，但出现以下错误：

未处理的承诺拒绝：模板分析错误：无法绑定到 “routerLink”，因为它不是“a”的已知属性。（“s=”导航栏 导航栏固定顶部导航栏自定义“>

][routerLink]=“['/home']>FiT

应用程序结构如下：

app/
  core/
    nav/
      nav.component.ts|html|scss  
      core.module.ts
  home/
    home.component.ts|html|scss
  app-routing.module.ts   
  app.component.ts|html|scss   
  app.module.ts

应用程序模块.ts

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

import { AppRoutingModule } from './app-routing.module';
import { CoreModule } from './core/core.module';

import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    AppRoutingModule,
    CoreModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

core.module.ts:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { NavComponent } from './nav/nav.component';

@NgModule({
  imports: [
    CommonModule // we use ngFor
  ],
  exports: [NavComponent],
  declarations: [NavComponent],
})
export class CoreModule { }

应用程序路由.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { HomeComponent } from './home/home.component';

const routes: Routes = [
  {
    path: '',
    component: HomeComponent
  },
  {
    path: 'home',
    component: HomeComponent
  },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  providers: []
})
export class AppRoutingModule { }

nav.component.html

<nav class="navbar navbar-fixed-top navbar-custom">
  <div class="container">
    <a class="navbar-brand"  [routerLink]="['/home']">FiT</a>
    <button class="navbar-toggler hidden-md-up" type="button" data-toggle="collapse" data-target="#fit-nav" aria-controls="fit-nav" aria-expanded="false" aria-label="Toggle navigation">
      &#9776;
    </button>
    <div class="collapse navbar-toggleable-sm" id="fit-nav">
      <ul class="nav navbar-nav pull-md-right">
        <li class="nav-item">
          <a class="nav-link">link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link">link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link">Log in</a>
        </li>
        <li class="nav-item">
          <a class="nav-link">sign up</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

适合
☰


链接


链接


登录


注册

所以我试着找出一个答案，我看到了许多类似的问题，但提出的解决方案没有帮助

---

代码中的一切看起来都很好。也许我遗漏了什么？

您有语法错误

<a class="navbar-brand"  routerLink="/home">FiT</a>

FiT

指令、组件和管道的作用域是声明它们的模块，除非它导入了导出这些项的模块

@NgModule({
  declarations: [ SomeComponentThatUsesRouterLink ]
})
class SomeModule {}

@NgModule({
  imports: [
    SomeModule,  <== SomeComponentThatUsesRouterLink can't use routerLink
    RouterModule
  ],
  declarations: [
    AppComponent <== Can use routerLink
  ]
})
class AppModule {}

现在

SomeModule

可以使用

RouteModule

指令，因为它导入一个导出它的模块

或者，如果您想要

SomeModule

，只需导入

RouterModule

本身即可

@NgModule({
  imports: [ RouterModule ],
  declarations: [ SomeComponentThatUsesRouterLink ]
})
class SomeModule {}

---

因此，要解决特定情况下的问题，您需要将

RouterModule

导入

CoreModule

，因为

NavComponent

需要路由器指令

谢谢，SefaÜmit Oray。它现在可以工作了。但我在文档中看到链接可以有如下字符串路径：routerLink=“。。。“或者我们可以将RouterLink指令绑定到这样的数组：Heroes。那么为什么第二种方法对我不起作用呢？@lalexa您需要将RouterModule导入到导入导航组件的模块中才能使用[RouterLink]语法。@SefaÜmitOray这不是真的。你甚至需要它来在回答中使用语法。但是用你的语法，它在启动时不会失败。但是路由器链接不起作用，因为没有路由器指令，它在RouterModule@peeskillet您所说的在技术上是正确的，但注册路由需要使用

RouterModule.forRoot（路线）

并将其导入应用程序模块，这使我的语法在应用程序范围内可用。@SefaÜmitOray，但路由已经定义。这不是问题。

forRoot

用于获取所有路由提供程序。在不需要配置路由的模块中，您不使用该选项或

forChild

。如果模块需要的是路由指令，然后您只需导入RouterModule，因为它会导出所有的指令

@NgModule({
  imports: [ RouterModule ],
  declarations: [ SomeComponentThatUsesRouterLink ]
})
class SomeModule {}