显然，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后，路由器链接指令被破坏。然而，其中一个答案中的“工作示例”是基于预测试代码的-它可能仍然工作，但我想知道为什么我创建的代码不能工作。
任何建议都将不胜感激!
对于>= 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>
`
})
对于< V5
也可以使用RouterLink作为一个指令。指示:[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},
])
> = 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这样的指令，而不让组件知道它们。
虽然在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>
`
})
对于< V5
也可以使用RouterLink作为一个指令。指示:[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},
])
一般来说，当你得到一个像不能绑定到'xxx'这样的错误，因为它不是一个已知的本机属性，最有可能的原因是忘记在指令元数据数组中指定一个组件或指令(或包含该组件或指令的常量)。这里的情况就是这样。
因为你没有指定RouterLink或常量ROUTER_DIRECTIVES -它包含以下内容:
export const ROUTER_DIRECTIVES = [RouterOutlet, RouterLink, RouterLinkWithHref,
RouterLinkActive];
-在指令数组中，然后当Angular解析
<a [routerLink]="['RoutingTest']">Routing Test</a>
它不知道RouterLink指令(它使用属性选择器RouterLink)。因为Angular知道a元素是什么，所以它假设[routerLink]="…"是a元素的属性绑定。但它随后发现routerLink不是元素的原生属性，因此抛出关于未知属性的异常。
我从来都不喜欢语法的模糊性。例如,考虑
<something [whatIsThis]="..." ...>
仅通过查看HTML，我们无法判断atisthis是什么
某物的固有属性
指令的属性选择器
某物的输入属性
我们必须知道哪些指令:[…]]在组件的/指令的元数据中指定，以便在心理上解释HTML。当我们忘记在指令数组中放入一些东西时，我觉得这种模糊性会使调试变得有点困难。
