大佬教程收集整理的这篇文章主要介绍了Angular2异常：无法绑定到’routerLink’,因为它不是一个已知的本机属性，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
使用快速启动代码和来自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 @R_675_8913@n'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.然而，答案之一的“工作示例”基于预beta代码 – 这仍然可以工作，但我想知道为什么我创建的代码不工作。
任何指针都会感谢！
导入RouterModule
参见https://angular.io/docs/ts/latest/guide/router.html
@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)];
主要
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。
以上是大佬教程为你收集整理的Angular2异常：无法绑定到’routerLink’,因为它不是一个已知的本机属性全部内容，希望文章能够帮你解决Angular2异常：无法绑定到’routerLink’,因为它不是一个已知的本机属性所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。