无法绑定到“ routerLink”,因为它不是已知属性


145

最近,我开始使用angular2。到目前为止,它很棒。因此,为了学习使用,我已经启动了一个演示个人项目angular-cli

使用基本的路由设置,我现在要导航到标头中的某些路由,但是由于我的标头是的父级,因此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 {}

我尝试访问的路由是从另一个路由委托moduleUsersModule

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。如果需要,我很乐意提供更多信息。


在您的应用程序的根目录下导入RouteModule,并更新npm包的最新稳定版本
harshes53

是的,我有最新的稳定版本。
Umair Sarfraz

2
你也加入RouterModuleimports: []在您使用的所有模块routerLink<router-outlet>
冈特Zöchbauer

@Umair模块订购在进口中很重要,请移至AppRoutingModule之前LayoutModule
harshes53

1
@ harshes53我认为那不是真的。
君特Zöchbauer

Answers:


258

您需要添加RouterModule到使用组件的任何组件或指令imports的所有@NgModule()位置(在这种情况下为routerLink和)<router-outlet>

declarations: [] 是使组件,指令,管道在当前模块内部已知。

exports: []是为了使组件,指令,管道可用于导入模块。declarations仅添加到模块的内容是私有的。exports将它们公开。

另请参阅https://angular.io/api/router/RouterModule#usage-notes


@Gunter可以多次导入RouterModule吗?例如,如果我想在childModule中使用routerLink,则需要将RouterModule导入到子模块中,而它已经由根应用程序Module导入了……
OlivierBoissé17

是的,它将只包含一次到构建输出中。
君特Zöchbauer

好的,但是我认为我们只需要注意forRoot一次调用该方法,子模块仅应导入RouterModule而不调用forRoot方法
OlivierBoissé17

我认为这取决于做什么forRoot。多次对提供者进行托管时forRoot,其结果与仅执行一次相同。如果您执行其他操作,则可能没有什么不同。
君特Zöchbauer

2
感谢您的回答!就我而言,该应用程序可以运行,但是测试失败。解决方案是在测试中为每个使用routerLink的组件导入RouterTestingModule。
Slavik Shynkarenko

24

您可能缺少路由包,也没有在主应用程序模块中包含路由器模块。

确保您的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
  ],

这没有解决问题。你能检查我的更新吗?
Umair Sarfraz

@Ben-“ forRoot()”表示您正在调用在导入的模块上定义的方法,该方法运行该模块的配置或设置。如果需要,还可以在自定义模块中定义类似“ forChild()”的方法并调用它。此方法用于诸如为服务设置提供程序之类的任务。这也是您在Angular中获得Singleton服务的方式。参见angular.io/guide/singleton-services
RoboBear

10

我将添加另一种情况,当我遇到相同的错误但只是作为一个假人。我已添加[routerLinkActiveOptions]="{exact: true}"但尚未添加routerLinkActive="active"

我的错误代码是

<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


3

如果没有其他效果,应重新启动ng serve。这是悲哀地发现这种虫子。


2
可以证明有一个错误。我只是不断删除dist文件夹的内容并重建。终于成功了。尝试添加指向app.component.ts中每个组件的链接。如果那不起作用,您唯一的选择是祷告和禁食。
山姆

1

就我而言,我只需要将我新创建的组件导入到RouterModule

{path: 'newPath', component: newComponent}

然后在app.module导入路由器并配置路由:

从'@ angular / router'导入{RouterModule};

imports: [
        RouterModule.forRoot([
            {path: '', component: DashboardComponent},
            {path: 'dashboard', component: DashboardComponent},
            {path: 'newPath', component: newComponent}
        ])
    ],

希望这对某些人有帮助!


1

您需要添加RouterMoudleimports包含该Header组件的模块的各个部分中

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.