不能绑定到routerLink'因为它不是一个已知的本地财产

显然，Angular2的beta版本比新版本更新，所以没有太多的信息，但我正在尝试做一些我认为相当基本的路由。

通过使用https://angular.io网站上的快速启动代码和其他代码片段，可以得到以下文件结构:

angular-testapp/
app/
app.component.ts
boot.ts
routing-test.component.ts
index.html

按照如下方式填充文件:

index . html

<html>


<head>
<base href="/">
<title>Angular 2 QuickStart</title>
<link href="../css/bootstrap.css" rel="stylesheet">


<!-- 1. Load libraries -->
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="node_modules/angular2/bundles/router.dev.js"></script>


<!-- 2. Configure SystemJS -->
<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('app/boot')
.then(null, console.error.bind(console));
</script>


</head>


<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
</body>


</html>

boot.ts

import {bootstrap}    from 'angular2/platform/browser'
import {ROUTER_PROVIDERS} from 'angular2/router';


import {AppComponent} from './app.component'


bootstrap(AppComponent, [
ROUTER_PROVIDERS
]);

app.component.ts

import {Component} from 'angular2/core';
import {RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS, LocationStrategy, HashLocationStrategy} from 'angular2/router';


import {RoutingTestComponent} from './routing-test.component';


@Component({
selector: 'my-app',
template: `
<h1>Component Router</h1>
<a [routerLink]="['RoutingTest']">Routing Test</a>
<router-outlet></router-outlet>
`
})


@RouteConfig([
{path:'/routing-test', name: 'RoutingTest', component: RoutingTestComponent, useAsDefault: true},
])


export class AppComponent { }

routing-test.component.ts

import {Component} from 'angular2/core';
import {Router} from 'angular2/router';


@Component({
template: `
<h2>Routing Test</h2>
<p>Interesting stuff goes here!</p>
`
})
export class RoutingTestComponent { }

试图运行此代码会产生以下错误:

EXCEPTION: Template parse errors:
Can't bind to 'routerLink' since it isn't a known native property ("
<h1>Component Router</h1>
<a [ERROR ->][routerLink]="['RoutingTest']">Routing Test</a>
<router-outlet></router-outlet>
"): AppComponent@2:11

我在这里发现了一个模糊相关的问题;升级到angular2.0.0-beta.0后，路由器链接指令被破坏。然而，其中一个答案中的“工作示例”是基于预测试代码的-它可能仍然工作，但我想知道为什么我创建的代码不能工作。

任何建议都将不胜感激!

215775 次浏览
小开
最佳答案

> = RC.5

导入RouterModule 另见https://angular.io/guide/router

@NgModule({
imports: [RouterModule],
...
})

> = RC.2

app.routes.ts

import { provideRouter, RouterConfig } from '@angular/router';


export const routes: RouterConfig = [
...
];


export const APP_ROUTER_PROVIDERS = [provideRouter(routes)];

main.ts

import { bootstrap } from '@angular/platform-browser-dynamic';
import { APP_ROUTER_PROVIDERS } from './app.routes';


bootstrap(AppComponent, [APP_ROUTER_PROVIDERS]);

& lt; = RC.1

你的代码丢失了

  @Component({
...
directives: [ROUTER_DIRECTIVES],
...)}

你不能使用像routerLink或router-outlet这样的指令而不让你的组件知道它们。

虽然在Angular2中指令名被修改为区分大小写，但元素仍然在名称中使用-，如<router-outlet>，以兼容web组件规范，该规范要求自定义元素的名称中使用-。

在全球范围内注册

要使ROUTER_DIRECTIVES全局可用，将这个提供程序添加到bootstrap(...):

provide(PLATFORM_DIRECTIVES, {useValue: [ROUTER_DIRECTIVES], multi: true})

那么就不再需要在每个组件中添加ROUTER_DIRECTIVES了。

小开

对于>= V5

import { RouterModule, Routes } from '@angular/router';


const appRoutes: Routes = [
{path:'routing-test', component: RoutingTestComponent}
];


@NgModule({
imports: [
RouterModule.forRoot(appRoutes)
// other imports here
]
})

组件:

@Component({
selector: 'my-app',
template: `
<h1>Component Router</h1>
<a routerLink="/routing-test" routerLinkActive="active">Routing Test</a>
<router-outlet></router-outlet>
`
})

& lt;V5

也可以使用RouterLink作为directives。directives: [RouterLink]。这对我很有用

import {Router, RouteParams, RouterLink} from 'angular2/router';


@Component({
selector: 'my-app',
directives: [RouterLink],
template: `
<h1>Component Router</h1>
<a [routerLink]="['RoutingTest']">Routing Test</a>
<router-outlet></router-outlet>
`
})


@RouteConfig([
{path:'/routing-test', name: 'RoutingTest', component: RoutingTestComponent, useAsDefault: true},
])
小开

一般来说，每当你得到类似Can't bind to 'xxx' since it isn't a known native property的错误时，最有可能的原因是忘记在directives元数据数组中指定一个组件或指令(或包含该组件或指令的常量)。这里的情况就是这样。

因为你没有指定RouterLink或常量ROUTER_DIRECTIVES –包含以下内容:

export const ROUTER_DIRECTIVES = [RouterOutlet, RouterLink, RouterLinkWithHref,
RouterLinkActive];

mdash;在directives数组中，那么当Angular解析

<a [routerLink]="['RoutingTest']">Routing Test</a>

它不知道RouterLink指令(它使用属性选择器routerLink)。因为Angular知道a元素是什么，所以它假设[routerLink]="..."是a元素的财产绑定。但它随后发现routerLink不是a元素的本机属性，因此抛出关于未知属性的异常。

我从来都不喜欢语法的模糊性。例如,考虑

<something [whatIsThis]="..." ...>

仅通过查看HTML，我们无法判断whatIsThis是否为

  • something的原生属性
  • 指令的属性选择器
  • something的输入属性

我们必须知道在组件的/指令的元数据中指定了哪些directives: [...]，以便在心理上解释HTML。当我们忘记在directives数组中放入一些东西时，我觉得这种模糊性会使调试变得有点困难。

小开

使用Visual Studio编码时的警告(2013)

我已经浪费了4到5个小时来调试这个错误。我尝试了我在StackOverflow上找到的所有解决方案，但我仍然得到这个错误:Can't bind to 'routerlink' since it isn't a known native property

注意，当你复制/粘贴代码时，Visual Studio有自动格式化文本的坏习惯。我总是从VS13得到一个小的瞬时调整(驼峰情况消失)。

这样的:

<div>
<a [routerLink]="['/catalog']">Catalog</a>
<a [routerLink]="['/summary']">Summary</a>
</div>

就变成:

<div>
<a [routerlink]="['/catalog']">Catalog</a>
<a [routerlink]="['/summary']">Summary</a>
</div>

这是一个很小的差异，但足以触发错误。最糟糕的是，每次我复制粘贴的时候，这个小差异总是避开我的注意。一次偶然的机会，我发现了这个小差异，并解决了它。

小开

上面提到的所有方法我都试过了。但没有一种方法对我有效。最后，我得到了上述问题的解决方案，它是为我工作。

我尝试了这个方法:

在Html中:

<li><a (click)= "aboutPageLoad()"  routerLinkActive="active">About</a></li>

TS文件:

aboutPageLoad() {
this.router.navigate(['/about']);
}
小开

我的解决办法很简单。我使用[href]而不是[routerLink]。我已经尝试了[routerLink]的所有解决方案。但对我来说都没用。

以下是我的解决方案:

<a [href]="getPlanUrl()" target="_blank">My Plan Name</a>

然后在TS文件中写入getPlanUrl函数。

小开

对于那些试图通过npm test或ng test使用Karma或其他东西运行测试时发现这一点的人。您的.spec模块需要一个特殊的路由器测试导入才能构建。

import { RouterTestingModule } from '@angular/router/testing';


TestBed.configureTestingModule({
imports: [RouterTestingModule],
declarations: [AppComponent],
});

http://www.kirjai.com/ng2-component-testing-routerlink-routeroutlet/

小开

在你们的模块中

import {Routes, RouterModule} from '@angular/router';

你必须导出模块RouteModule

例子:

@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})

能够访问的功能，为所有谁导入这个模块。

小开

在我的例子中，我在App模块中导入了RouterModule，但在我的功能模块中没有导入。在我的EventModule中导入路由器模块后，错误就消失了。

    import {NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {EventListComponent} from './EventList.Component';
import {EventThumbnailComponent} from './EventThumbnail.Component';
import { EventService } from './shared/Event.Service'
import {ToastrService} from '../shared/toastr.service';
import {EventDetailsComponent} from './event-details/event.details.component';
import { RouterModule } from "@angular/router";
@NgModule({
imports:[BrowserModule,RouterModule],
declarations:[EventThumbnailComponent,EventListComponent,EventDetailsComponent],
exports: [EventThumbnailComponent,EventListComponent,EventDetailsComponent],
providers: [EventService,ToastrService]
})
export class EventModule {
        

}
小开

我非常感谢@raykrow的回答，当一个人只有在测试文件中有这个问题!这就是我遇到它的地方。

因为有另一种方法来做备份通常是很有帮助的，所以我想提一下这个同样有效的技术(而不是导入RouterTestingModule):

import { MockComponent } from 'ng2-mock-component';
. . .
TestBed.configureTestingModule({
declarations: [
MockComponent({
selector: 'a',
inputs: [ 'routerLink', 'routerLinkActiveOptions' ]
}),
. . .
]

(通常，可以在<a>元素上使用routerLink，但对其他组件相应地调整选择器。)

我想要提到这个替代解决方案的第二个原因是，尽管它在许多规范文件中都很有用，但在一个案例中我遇到了一个问题:

Error: Template parse errors:
More than one component matched on this element.
Make sure that only one component's selector can match a given element.
Conflicting components: ButtonComponent,Mock

我不太明白这个mock和我的ButtonComponent是如何使用相同的选择器的，所以寻找另一种方法将我引导到@raykrow的解决方案。

小开

如果你使用共享模块，只需将RouterModule添加到声明了你的组件的Module中，别忘了添加<router-outlet></router-outlet>

从这里引用RouterLink不工作

小开

如果在单元测试时出现这个错误，请这样写。

import { RouterTestingModule } from '@angular/router/testing';
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [RouterTestingModule],
declarations: [AppComponent],
});
}));

提交答案