的index.html
<residence-app><h1>Loading . . .</h1></residence-app>
app.ts
/// <reference path="../angular2-oPost/typings/angular2/angular2.d.ts" />
"use strict";
import { Component,View,bootstrap,Directive } from "angular2/angular2";
import { routerInjectables,routerDirectives,Router,RouterOutlet,RouteConfig,RouterLink } from 'angular2/router';
import { Home } from "home";
@Component({
selector: 'residence-app'
})
@View({
directives: [ RouterOutlet,RouterLink,Home ],templateUrl: "components/navigation/headerFooter.html",styleUrls: ['commonStyles/headerFooter.css']
})
@RouteConfig( [ {path: '/home',as: component: Home } ] )
// TypeScript error ',' expected. at line 32 col48 ( : right after component),but a,causes 2 other errors
class ResidenceApp {
}
bootstrap( ResidenceApp,[
routerInjectables
] );
headerFooter.html有几个div和以下标记来插入部分页面组件
<router-outlet></router-outlet>
home.js是要在headerFooter.html的router-outlet中插入的主页测试组件
"use strict";
import { Component,Directive } from "angular2/angular2";
@Component({
//Error loading "home" from "app" at http://localhost/angular2-oPost/app.js
//http://localhost/angular2-oPost/home.js:3:1: Unexpected token @ (WARNING: non-Error used)"
selector: "home"
})
@View({
template: `<h1>Home page under construction</h1>
<a router-link='home'>Home Page</a>`
})
class Home {
}
bootstrap( Home );
解决方法
@RouteConfig( [ {path: '/home',as: component: Home } ] )
你需要定义别名并使其成为CamelCase(技术上是PascalCase)
此外,as参数已更改为name
@RouteConfig([{ path: '/home',name: 'Home',component: Home }])
资源：
> angular@2.0.0-alpha.38/CHANGELOG.md
> angualar@2.0.0-alpha.46
其次,您的路由器引导程序已损坏
bootstrap(ResidenceApp,[ routerInjectables ]);
routerInjectables已被ROUTER_PROVIDERS取代
bootstrap(ResidenceApp,[ ROUTER_PROVIDERS ]);
资源：
> angular@2.0.0-alpha.41/CHANGELOG.md
第三,您需要提供正确的Home路径
import { Home } from "home";
import angular2 / angular2有效,因为config.js包含别名. config.js不包含项目组件的别名(除非您手动添加它们),因此您必须通过相对路径导入.
import { Home } from "./components/home";
第四,您的routerLink将无法正常工作
<a routerLink='home'>Home Page</a>`
它必须使用正确的单向绑定指向别名.
<a [routerLink]="['./Home']">Home Page</a>`
注意：routerLink表达式中的链接指向别名(即路由中定义的名称字段,因此它也需要是CamelCase.
资源：
> angular2/router/router_link.ts
第五,您需要配置Home组件以包含RouterLink
import { RouterLink } from 'angular2/router';
...
@View({
directives: [ RouterLink ],template: `<h1>Home page under construction</h1>
<a routerLink='home'>Home Page</a>`
})
class Home {
...
Phew ……我认为这就是一切.
除此之外：最近对路由器进行了大量重大更改,因此基本上在线可用的任何示例都会被破坏.
更新：
留意.在未来的版本RouterOutlet /< router-outlet>将被RouterViewport /< router-viewport>取代.
UPDATE2：
Route as参数已更改为name
资源：
UPDATE2：
突破变化：
[router-link] – > [routerLink]
感谢@Mike Laird的评论.
