Angular2异常:无法绑定到“”routerLink“”，因为它不是已知的本机属性
显然，Angular2的测试版是新的而不是新的，所以没有太多的信息，但我正在尝试做一些我认为是相当基本的路由。
对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我在这里发现了一个模糊相关的问题：router-link directives broken after upgrading to angular2.0.0-beta.0。然而，其中一个答案中的“工作示例”是基于预测试版代码的--这可能仍然可以工作，但我想知道为什么我创建的代码不能工作。
如果您有任何建议，我们将非常感谢！
回答 12
Stack Overflow用户
发布于 2015-12-17 01:00:47
>=RC.5
另请参阅https://angular.io/guide/router导入RouterModule
@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]);<=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。
Stack Overflow用户
发布于 2017-03-01 14:30:42
对于那些在尝试运行测试时发现这一点的人，因为是通过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/
Stack Overflow用户
发布于 2016-07-30 20:59:36
使用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>这是一个很小的差异，但足以触发错误。最丑陋的部分是，每次我复制和粘贴时，这个微小的差异都会一直躲避我的注意。完全是偶然的，我看到了这个微小的差异，并解决了它。
https://stackoverflow.com/questions/34317044
复制相似问题