typescript - Angular2路由，使用TypeScript，编译报错，获取意外token Console报错

Question

我正在使用 TypeScript 6.0.0 试验 Angular2 alpha35。我的 index.html 加载了一个 headerFooter 组件。然后，我向其中添加了 router-outlet 标签，以在其间插入多个页面。 How to change router by typescript in angular2? 处的代码帮助消除了几个错误，但经过几个小时的颠簸，我仍然在 @RouteConfig 中收到 TypeScript 错误，即预期的“，”。在 。 . . ( : 就在组件之后)，并且在它找到的部分页面组件中出现意外@ token 的控制台错误(GET home.js 没问题)，但无法加载/插入。这是相关代码。 app.ts、index.html 和 home.js 都在同一个目录中。

index.html

<residence-app><h1>Loading . . .</h1></residence-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 已损坏

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>`

它必须指向别名，使用正确的单向绑定(bind)。

<a [routerLink]="['./Home']">Home Page</a>`

注意:routerLink 中的链接expression 指向别名(即路由中定义的 name 字段，因此它也需要是 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 {
...

呼...我想这就是一切。

另外:最近对路由器进行了很多重大更改，因此基本上在线提供的所有示例都已损坏。

更新:

密切关注。在未来的版本中 RouterOutlet/<router-outlet>将被 RouterViewport 取代/<router-viewport> .

更新2:

路线 as参数已更改为 name

来源:

• angular/issues#4679

更新2:

重大变化:

[router-link] -> [routerLink]

感谢@Mike Laird 的评论。