配置 angular2 应用程序导航和路由时出错
Error while configuring angular2 app navigation and routing
尝试使用 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/
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',
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">
☰
</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>
指令、组件和管道的范围仅限于声明它们的模块,除非它导入了一个导出这些项目的模块。例如
@NgModule({
declarations: [ SomeComponentThatUsesRouterLink ]
})
class SomeModule {}
@NgModule({
imports: [
SomeModule, <== SomeComponentThatUsesRouterLink can't use routerLink
RouterModule
],
declarations: [
AppComponent <== Can use routerLink
]
})
class AppModule {}
在这里,即使 AppModule
导入了 RouterModule
,它的范围也仅限于它自己的 declarations
,而不是 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
需要路由器指令
尝试使用 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/
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',
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">
☰
</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>
指令、组件和管道的范围仅限于声明它们的模块,除非它导入了一个导出这些项目的模块。例如
@NgModule({
declarations: [ SomeComponentThatUsesRouterLink ]
})
class SomeModule {}
@NgModule({
imports: [
SomeModule, <== SomeComponentThatUsesRouterLink can't use routerLink
RouterModule
],
declarations: [
AppComponent <== Can use routerLink
]
})
class AppModule {}
在这里,即使 AppModule
导入了 RouterModule
,它的范围也仅限于它自己的 declarations
,而不是 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
需要路由器指令