Angular2 异常:无法绑定到“routerLink",因为它不是已知的本机属性 [英] Angular2 Exception: Can't bind to 'routerLink' since it isn't a known native property
问题描述
显然 Angular2 的测试版比新的要新,所以没有太多信息,但我正在尝试做一些我认为相当基本的路由.
Obviously the beta for Angular2 is newer than new, so there's not much information out there, but I am trying to do what I think is some fairly basic routing.
对来自 https://angular.io 网站的快速入门代码和其他片段进行黑客攻击导致以下文件结构:
Hacking about with the quick-start code and other snippets from the https://angular.io website has resulted in the following file structure:
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 { }
尝试运行此代码会产生错误:
Attempting to run this code produces the error:
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.但是,其中一个答案中的工作示例"是基于测试版前的代码——它可能仍然有效,但我想知道为什么我创建的代码不起作用.
I found a vaguely related issue here; router-link directives broken after upgrading to angular2.0.0-beta.0. However, the "working example" in one of the answers is based on pre-beta code - which may well still work, but I would like to know why the code I have created is not working.
如有任何指点,将不胜感激!
Any pointers would be gratefully received!
推荐答案
>=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]);
<=RC.1
您的代码丢失了
@Component({
...
directives: [ROUTER_DIRECTIVES],
...)}
你不能使用像 routerLink
或 router-outlet
这样的指令而不让你的组件知道它们.
You can't use directives like routerLink
or router-outlet
without making them known to your component.
虽然 Angular2 中的指令名称已更改为区分大小写,但元素仍使用 -
名称,如
以与网络兼容-components 规范要求在自定义元素的名称中使用 -
.
While directive names were changed to be case-sensitive in Angular2, elements still use -
in the name like <router-outlet>
to be compatible with the web-components spec which require a -
in the name of custom elements.
全球注册
要使 ROUTER_DIRECTIVES
全局可用,请将此提供程序添加到 bootstrap(...)
:
To make ROUTER_DIRECTIVES
globally available, add this provider to bootstrap(...)
:
provide(PLATFORM_DIRECTIVES, {useValue: [ROUTER_DIRECTIVES], multi: true})
那么就不再需要为每个组件添加ROUTER_DIRECTIVES
.
then it's no longer necessary to add ROUTER_DIRECTIVES
to each component.
这篇关于Angular2 异常:无法绑定到“routerLink",因为它不是已知的本机属性的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!