使用TypeScript的Angular2路由具有编译错误并获得意外的令牌控制台错误

Question

我正在使用TypeScript 6.0.0试验Angular2 alpha35.我的index.html加载了一个headerFooter组件.然后我添加了router-outlet标签,在其间插入几个页面.在如何通过angular2中的打字稿更改路由器的代码？有助于消除几个错误,但经过几个小时的颠簸,我仍然在@RouteConfig中得到一个TypeScript错误,即','预期.在 ...(在组件之后),以及它找到的部分页面组件中的意外@令牌的控制台错误(GET home.js没问题),但无法加载/插入.这是相关的代码.app.ts,index.html和home.js都在同一目录中.

的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, View, bootstrap, 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 );

Answer 1

首先,你的路线被打破了

@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表达式中的链接指向别名(即name路径中定义的字段,因此它也需要是CamelCase.

资源:

• angular2 /路由器/ 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

资源:

• 角/问题#4679

UPDATE2:

突破变化:

[router-link] - > [routerLink]

感谢@Mike Laird的评论.