我正在尝试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 {
}