我正在尝试Angular2,alpha46,并使用atom-typescript 7.7.2我终于让它前进到一个子页面,但是当我点击Back按钮时它没有正确地返回 . 控制台错误是 - postApartment4Rent没有路由配置 . 但命令行更改为显示原始index.html URL,但页面不会自动刷新 . 单击“刷新”时,将加载index.html页面 . Home组件似乎不存在 . 另外,atom-typescript有错误 - 路由器没有导出的成员ROUTER_PROVIDERS - 虽然angular2似乎找到并使用它 . 这是app.ts,index.html和postApartment4Rent.ts的相关代码 . 除了组件名称外,home.ts文件目前与postApartment4Rent.ts相同 .
的index.html
<residence-app><h1>Loading . . .</h1></residence-app>
<!--other stuff-->
<script src="https://code.angularjs.org/2.0.0-alpha.46/angular2.dev.js"></script> <!--Must be after the 2 ES6 & System.config above -->
<script src="https://code.angularjs.org/2.0.0-alpha.46/router.dev.js"></script>
app.ts
/// <reference path="../angular2-oPost/typings/angular2/angular2.d.ts" />
"use strict";
import { Component, View, bootstrap, Directive, bind, Inject } from "angular2/angular2";
import { ROUTER_PROVIDERS,
Router,
RouterOutlet,
RouteConfig,
RouterLink,
Location
} from 'angular2/router';
import { Home } from "./src/components/navigation/home";
import { PostApartment4Rent } from "./src/components/navigation/postApartment4Rent";
@Component({
selector: 'residence-app'
})
@View({
templateUrl: "angular2-oPost/src/components/navigation/headerFooter.html",
styleUrls: ["angular2-oPost/src/commonStyles/headerFooter.css"],
directives: [ RouterOutlet, RouterLink, Home, PostApartment4Rent ]
})
@RouteConfig( [
{ path: "/home", as: "Home", component: Home },
{ path: "/postApartment4Rent ", as: "PostApartment4Rent", component: PostApartment4Rent }
] )
class ResidenceApp {
router: Router;
location: Location;
constructor(router: Router, location: Location) { this.router = router; this.location = location; }
}
bootstrap( ResidenceApp, [ROUTER_PROVIDERS] );
headerFooter.html有几个div和以下标记来插入部分页面组件
<router-outlet></router-outlet>
postApartment4Rent.ts应该在headerFooter.html的路由器插座中插入一个组件,如果我正确理解路由
"use strict";
import { Component, View, bootstrap, Directive } from "angular2/angular2";
import { RouterLink } from 'angular2/router';
@Component({
selector: "residence-app" //is this correct?
})
@View({
template: `
<div>
<nav>
<ul>
<li><a [router-link]="['./Home']">Home Page</a></li>
<li><a [router-link]="['./PostApartment4Rent']">Rent Apartment input link</a></li>
</ul>
</nav>
</div>
<main>
< router-link ></router-link >
</main>
<h1>PostApartment4Rent is under construction</h1>
`,
directives: [ RouterLink ]
})
export class PostApartment4Rent {
}