Question

我正在使用TypeScript 6.0.0试验Angular2 alpha35。我的index.html加载了一个headerFooter组件。然后我添加了router-outlet标签，在其间插入几个页面。 How to change router by typescript in 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 }])

来源：

其次，您的路由器引导程序已损坏

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/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：

路线as参数已更改为name

来源：

angular/issues#4679

<强> UPDATE2：

突破变化：

[router-link] - ＆gt; [routerLink]

感谢@Mike Laird的评论。

Answer 2

完成所有步骤后仍然无效后，只需尝试使用<base href="/">代码后的<head>设置index.html中的基本网址。

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

2 个答案: