配置angular2 app导航和路由时出错

发布时间：2020-12-17 17:27:12 所属栏目：安全来源：网络整理

导读：尝试使用angular-cli创建一个带有angular2的应用程序我面临以下问题：我想配置导航和路由,但是我收到以下错误： Unhandled Promise rejection: Template parse errors: Can’t bind to ‘routerLink’ since it isn’t a known property of ‘a’. (“s=”n

尝试使用angular-cli创建一个带有angular2的应用程序我面临以下问题：
我想配置导航和路由,但是我收到以下错误：

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

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

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

解决方法

指令,组件和管道的范围限定为声明它们的模块,除非它导入导出这些项的模块.例如

@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需要路由器指令

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!