Unhandled Promise rejection: Template parse errors: Can’t bind to
‘routerLink’ since it isn’t a kNown property of ‘a’. (“s=”navbar
navbar-fixed-top navbar-custom”>

][routerLink]=”[‘/home’]”>FiT

App结构如下：

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

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 { 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 { }

APP-routing.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',];

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

nav.component.html

<nav>
  <div>
    <a[routerLink]="['/home']">FiT</a>
    <buttontype="button" data-toggle="collapse" data-target="#fit-nav" aria-controls="fit-nav" aria-expanded="false" aria-label="Toggle navigation">
      &#9776;
    </button>
    <divid="fit-nav">
      <ul>
        <li>
          <a>link</a>
        </li>
        <li>
          <a>link</a>
        </li>
        <li>
          <a>Log in</a>
        </li>
        <li>
          <a>sign up</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

所以我试图找到答案,我已经看到了许多类似的问题,但提出的解决方案没有帮助.

代码中的一切看起来都很好.也许我错过了什么？

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

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

在这里,即使AppModule导入了RouterModule,它的范围仅限于它自己的声明,而不是SharedModule,因此SomeComponentThatUsesRouterLink不能使用routerLink指令.

现在看这里

@NgModule({
  exports: [ RouterModule,CommonModule,FormsModule ]
})
class SharedModule {}

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

现在SomeModule可以使用RouteModule指令,因为它导入了一个导出它的模块

或者如果你想要SomeModule只能导入RouterModule本身

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

因此,要在特定情况下解决问题,需要将RouterModule导入CoreModule,因为NavComponent需要路由器指令

我的菜单按钮,显示手机：

<button type="button"data-toggle="collapse" data-target="#myNavbar">

搜索此问题返回结果未发布到角度2,我不知道如何实现它们.

当用户点击链接时,如何隐藏导航栏？

<li><a routerLink="/page">Click this should hide nav</a></li>

import { Directive,ElementRef,Input,HostListener } from "@angular/core";

@Directive({
    selector: "[menuClose]"
})
export class CloseMenuDirective {
    @input()
    public menu: any;

    constructor(private element: ElementRef) { }

    @HostListener("click")
    private onClick() {
        this.menu.classList.remove("show");
    }
}

不要忘记将它添加到声明数组中的app.module

import { CloseMenuDirective } from './directives/close-menu.directive';
@NgModule({
    declarations: [
        ...declarations,CloseMenuDirective
    ]
})
export class AppModule { }

然后在HTML中创建对菜单的引用并将其传递给link元素.

<divhttps://www.jb51.cc/tag/pagelayout/" target="_blank">page-layout">
    <!-- Mark the menu with #menu,thus creating a reference to it -->
    <asideid="navbar-header" #menu>
        <ul>
            <li>
                <a[routerLink]="['./somewhere']"
                   routerLinkActive="active"
                   menuClose      <!-- Our custom directive above -->
                   [menu]="menu"> <!-- Bind to menu -->
                    <span>My Link</span>
                </a>
            </li>
        </ul>
    </aside>
</div>

我的索引文件,

<!--... . .  varIoUs scripts and styles . . . . . --->
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="node_modules/angular2/bundles/router.dev.js"></script>
<script src="node_modules/angular2/bundles/http.dev.js"></script>

<script>
  System.config({
    packages: {        
      app: {
        format: 'register',defaultExtension: 'js'
      }
    }
  });
  System.import('app/main')
        .then(null,console.error.bind(console));
</script>
</head>
<body>
  <app></app>
</body>

应用来源,

main.ts

import {bootstrap}    from 'angular2/platform/browser';
import {RoutingApp} from './routing/routing.app'
import {ROUTER_PROVIDERS} from 'angular2/router'

bootstrap(RoutingApp,[ROUTER_PROVIDERS]);

RoutingApp

import {Component} from "angular2/core"
import {RouteComponent} from './route.component'
import { RouteConfig,ROUTER_DIRECTIVES,ROUTER_PROVIDERS } from 'angular2/router';


@Component({
    selector : 'app',template :  `
        go to this <a href="javascript:void()"data="/link">link</a>
        <br />
        <router-outlet></router-outlet>

    `,directives: [ROUTER_DIRECTIVES],providers: [ROUTER_PROVIDERS]
})
@RouteConfig([
    {path: '/link',name: 'Link',component: RouteComponent}
])
export class RoutingApp{

}

和RouteComponent

import {Component} from 'angular2/core'

@Component({
    template: `
        hello from RouteComponent
    `
})
export class RouteComponent{}

我做错了什么？ Angular版本是2.0.0-beta.7.

谢谢您的任何见解.

<a [routerLink]="['Link']">link</a>

由于您已将ROUTER_DIRECTIVES指定到组件的directives属性中,因此该指令可直接使用