Angular2例外：不能绑定到“routerLink”，因为它不是一个已知的本地属性
显然，Angular2的testing版比新版本更新，所以没有太多的信息，但是我正在尝试做我认为是相当基本的路由。
使用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 { }
路由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后中断 。 然而，其中一个答案的“工作示例”是基于pre-beta代码 – 这可能仍然有效，但我想知道为什么我创build的代码不工作。
任何指针将感激地收到！
> = RC.5
导入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)];
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(...)添加到bootstrap(...) ：
provide(PLATFORM_DIRECTIVES, {useValue: [ROUTER_DIRECTIVES], multi: true})
那么不再需要为每个组件添加ROUTER_DIRECTIVES 。
对于那些在尝试运行testing时发现这个问题的人，因为通过npm test或ng test使用Karma或其他方法。 您的.spec模块需要一个特殊的路由器testing导入才能build立。
import { RouterTestingModule } from '@angular/router/testing'; TestBed.configureTestingModule({ imports: [RouterTestingModule], declarations: [AppComponent], });
http://www.kirjai.com/ng2-component-testing-routerlink-routeroutlet/
用Visual Studio编码时要小心（2013）
我浪费了4到5个小时试图debugging这个错误。 我尝试了所有的解决scheme，我发现在信件Can't bind to 'routerlink' since it isn't a known native property ，我仍然有这个错误： 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>
这是一个小的差异，但足以触发错误。 最丑陋的部分是，每次我复制和粘贴时，这个小小的差异就一直在避免我的注意力。 凭借纯粹的机会，我看到了这个小小的差异，并解决了它。
一般来说，每当你遇到一个错误，如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];
– 在directives数组中，然后当Angularparsing
<a [routerLink]="['RoutingTest']">Routing Test</a>
它不知道RouterLink指令 （使用属性select器routerLink ）。 由于Angular知道a元素是什么，它假定[routerLink]="..."是一个绑定a元素的属性 。 但是，它然后发现， routerLink不是一个元素的本地属性，因此它引发关于未知属性的exception。
我从来没有真正喜欢语法的模糊性 。 也就是说，考虑一下
<something [whatIsThis]="..." ...>
只要看看HTML，我们就不能分辨whatIsThis是什么
-
something的本地财产 - 一个指令的属性select器
-
something的input属性
我们必须知道组件的/指令的元数据中指定了哪些directives: [...] ，以便从心理上解释HTML。 而当我们忘记把一些东西放到directives数组中的时候，我觉得这种模糊性使得它更难以debugging。
也可以使用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}, ])
你有你的模块
import {Routes, RouterModule} from '@angular/router';
您必须导出模块RouteModule
例：
@NgModule({ imports: [RouterModule.forChild(routes)], exports: [RouterModule] })
能够访问所有导入该模块的人员的function。
我已经尝试了上面提到的所有方法。但是没有一个方法适用于我。最终，我得到了上述问题的解决scheme，它正在为我工作。
我试过这个方法：
在Html中：
<li><a (click)= "aboutPageLoad()" routerLinkActive="active">About</a></li>
在TS文件中：
aboutPageLoad() { this.router.navigate(['/about']); }
在我的情况下，我已经导入应用程序模块bot中的RouterModule不导入我的function模块。 在我的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 { }
我的解决scheme很简单。 我使用[href]而不是[routerLink]。 我已经尝试了[routerLink]的所有解决scheme。 他们没有一个在我的情况下工作。
这是我的解决scheme：
<a [href]="getPlanUrl()" target="_blank">My Plan Name</a>
然后在TS文件中写入getPlanUrl函数。
- Angular 2使用另一个模块的组件
- 什么是AngularJS指令？
- 什么时候应该用量angular器承诺？
- Angular 2 beta.17：Property'map'在types'Observable <Response>'上不存在
- 如何在angular-cli项目中升级Angular 2版本？
- Angular 2 2.0.0-rc.1属性'map'在types'Observable <Response>'上不存在与问题报告不一样
- Angularjs2 – 在应用程序启动之前预加载服务器configuration
- 创buildPostgreSQL ROLE（用户），如果它不存在
- 如何添加“类”主机元素？
