Angular2 + Typescript1.5 路由

Question

我正在尝试运行测试应用程序以了解 AngularJS2 中的路由是如何工作的。我尝试了以下代码：

/// <reference path="reference.ts" />

import { Component, View, bootstrap } from 'angular2/angular2'
import { Location, RouteConfig, RouterLink, Router, RouterOutlet } from 'angular2/router';
import { routerInjectables, Pipeline } from 'angular2/router';
import { Directive, Attribute, ElementRef, DynamicComponentLoader} from 'angular2/angular2';

import { DrinksService}  from 'services'

import { Drinkers } from 'components/drinkers'
import { Drinks } from 'components/drinks'
import { Contact } from 'components/contact'

@Component({
    selector: 'my-app'
})

@View({
    directives: [RouterOutlet, RouterLink],
    template: `
    <nav>
      <ul>
        <li><a router-link="drinks">Drinks</a></li>
        <li><a router-link="drinkers">Drinkers</a></li>
        <li><a router-link="contact">Contact</a></li>
      </ul>
    </nav>
    <main>
      <router-outlet></router-outlet>
    </main>
  `
})

@RouteConfig([
    { path: '/', component: Contact, as: 'contact'},
    { path: '/drinks', component: Drinks, as: 'drinks'},
    { path: '/drinkers', component: Drinkers, as: 'drinkers'}
])

class MyAppComponent {
    name:string
    buttonName:string
    showup:boolean

    constructor(public router: Router) {
        this.name = 'Alice and Bob'
        this.buttonName = 'are going to see rabbit whole'
        this.showup = true
    }

    goToDrink = () => {
        alert('Sicher?')
        this.showup = false
    }

    isVisible = () => {
        return !this.showup
    }

    goToDrinkReally = () => {
        this.router.parent.navigate('/home')
    }

}

bootstrap(MyAppComponent, [routerInjectables])

index.html:

<!-- index.html -->
<html>
<head>
    <title>Angular 2 Quickstart</title>
    <script src="https://github.jspm.io/jmcriffey/bower-traceur-runtime@0.0.87/traceur-runtime.js"></script>
    <script src="https://jspm.io/system@0.16.js"></script>
    <script src="angular25minutes/angular25minutes.js"></script>
</head>
<body>
<!-- The app component created in app.ts -->
<my-app></my-app>
<script>System.import('app')</script>
</body>
</html>

一切都可以编译，但在浏览器中我得到的是空白屏幕。因为 html 我只能看到

<html><head>
    <title>Angular 2 Quickstart</title>
    <script src="https://github.jspm.io/jmcriffey/bower-traceur-runtime@0.0.87/traceur-runtime.js"></script><style type="text/css"></style>
    <script src="https://jspm.io/system@0.16.js"></script><script type="text/javascript" src="https://jspm.io/es6-module-loader@0.16.6.js" data-init="upgradeSystemLoader"></script>
    <script src="angular25minutes/angular25minutes.js"></script>
</head>
<body>
<!-- The app component created in app.ts -->
<my-app></my-app>
<script>System.import('app')</script>

</body></html>

我做错了什么？

有时在控制台编译后会出现以下问题：

原始异常：未设置基本 href。提供到 "appBaseHrefToken" 的绑定或添加基本元素。

但它是相当随机的。

Answer 1

这里有几个问题：

您似乎没有加载路由器文件。它们可以在 code.angularjs.org 以及其他地方找到。

要更完整地了解如何使用 Angular 2 路由器，请查看 Meteor-Angular2 Tutorial。

目前默认的 HTML5LocationStrategy 似乎有很多问题，我建议在您的应用中设置 HashLocationStrategy。

在您的根应用程序文件中，导入必要的文件：

import {
  Component,
  View,
  bootstrap,
  provide
} from 'angular2/angular2'
import {
  LocationStrategy,
  HashLocationStrategy
  ROUTER_PROVIDERS,
} from 'angular2/router';

然后在引导时绑定到位置：

bootstrap(MyAppComponent, [
  ROUTER_PROVIDERS,
  provide(LocationStrategy).toClass(HashLocationStrategy)
]);

更新

routerInjectables 已更改为 ROUTER_PROVIDERS
bind 已更改为 provide

来源：

angular@2.0.0-alpha.41/CHANGELOG.md

Angular2 + Typescript1.5 路由

Angular2 + Typescript1.5 Routing

typescript1.5

angular