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

发布时间：2020-12-17 17:58:18 所属栏目：安全来源：网络整理

导读：我正在使用TypeScript 6.0.0试验Angular2 alpha35.我的index.html加载了一个headerFooter组件.然后我添加了router-outlet标签,在其间插入几个页面. How to change router by typescript in angular2?的代码有助于消除多个错误,但经过几个小时的颠簸后,我仍然

我正在使用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,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 );

解决方法

首先,你的路线被打破了

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

Route as参数已更改为name

资源：

> angular/issues#4679

UPDATE2：

突破变化：

[router-link] – > [routerLink]

感谢@Mike Laird的评论.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!