无法绑定到“”routerLink“”，因为它不是已知属性
最近，我开始玩angular 2，到目前为止，它非常棒。因此，为了学习使用angular-cli，我已经开始了一个演示个人项目。
有了基本的路由设置，我现在想导航到一些来自header的路由，但是由于我的header是router-outlet的父级，所以我收到了这个错误。
app.component.html
<app-header></app-header> // Trying to navigate from this component
<router-outlet></router-outlet>
<app-footer></app-footer>header.component.html
<a [routerLink]="['/signin']">Sign in</a>现在我部分理解了，我猜因为该组件是router-outlet的包装器，所以不可能以这种方式访问router。那么，对于这样的场景，有没有可能从外部访问导航？
如果需要的话，我很乐意添加更多的信息。提前谢谢你。
更新
1-我的package.json已经有了稳定的@angular/router 3.3.1版本。2-在我的主app模块中，我已经导入了routing-module。请看下面的内容。
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 { AlertModule } from 'ng2-bootstrap';
import { LayoutModule } from './layout/layout.module';
import { UsersModule } from './users/users.module';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { PageNotFoundComponent } from './shared/components/not-found.component';
@NgModule({
declarations: [
AppComponent,
PageNotFoundComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
AlertModule.forRoot(),
LayoutModule,
UsersModule,
AppRoutingModule --> This is the routing module.
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }app-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { SigninComponent } from './users/signin/signin.component';
import { PageNotFoundComponent } from './shared/components/not-found.component';
const routes: Routes = [
{ path: '**', component: PageNotFoundComponent }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule {}我尝试访问的路由是从另一个module (即UsersModule )委派的
user-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { SigninComponent } from './signin/signin.component';
const usersRoutes: Routes = [
{ path: 'signin', component: SigninComponent }
];
@NgModule({
imports: [
RouterModule.forChild(usersRoutes)
],
exports: [
RouterModule
]
})
export class UsersRoutingModule { }当我尝试从属于Layout模块的组件导航时，但对路由器模块一无所知。这就是导致错误的原因。
Layout.module.ts
import { NgModule } from '@angular/core';
import { HeaderComponent } from './header/header.component';
import { FooterComponent } from './footer/footer.component';
@NgModule({
declarations: [HeaderComponent, FooterComponent],
exports: [HeaderComponent, FooterComponent]
})
export class LayoutModule{}我正在尝试从HeaderComponent导航。如果需要的话，我很乐意提供更多的信息。
回答 13
Stack Overflow用户
发布于 2017-02-05 20:50:50
您需要将RouterModule添加到组件使用任何组件或指令(在本例中为routerLink和<router-outlet> )的每个@NgModule()的imports中。
import {RouterModule} from '@angular/router';
@NgModule({
declarations:[YourComponents],
imports:[RouterModule]declarations: []是使组件、指令、管道在当前模块内为人所知。
exports: []使组件、指令、管道可用于导入模块。添加到declarations的内容只对模块是私有的。exports将它们公之于众。
Stack Overflow用户
发布于 2017-02-04 10:56:04
您缺少包含路由包，或在主应用程序模块中包含路由器模块。
确保您的package.json具有以下内容：
"@angular/router": "^3.3.1"然后在您的app.module中导入路由器并配置路由：
import { RouterModule } from '@angular/router';
imports: [
RouterModule.forRoot([
{path: '', component: DashboardComponent},
{path: 'dashboard', component: DashboardComponent}
])
],更新
将AppRoutingModule移到导入中的第一个位置：
imports: [
AppRoutingModule.
BrowserModule,
FormsModule,
HttpModule,
AlertModule.forRoot(), // What is this?
LayoutModule,
UsersModule
],Stack Overflow用户
发布于 2018-07-20 13:49:09
我将添加另一个例子，其中我得到了相同的错误，但只是一个哑巴。我在没有添加routerLinkActive="active"的情况下添加了[routerLinkActiveOptions]="{exact: true}"。
我的错误代码是
<a class="nav-link active" routerLink="/dashboard" [routerLinkActiveOptions]="{exact: true}">
Home
</a>当它应该是的时候
<a class="nav-link active" routerLink="/dashboard" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">
Home
</a>没有routerLinkActive，你就不能拥有routerLinkActiveOptions。
https://stackoverflow.com/questions/42035387
复制相似问题