Angular2 + Typescript1.5路由

本文介绍了Angular2 + Typescript1.5路由的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我试图运行一个测试程序，了解AngularJS2路由的工作原理。我尝试以下code：

I am trying to run a test application to understand how the routing in AngularJS2 works. I tried the following code:

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

<!-- index.html -->
<html>
<head>
    <title>Angular 2 Quickstart</title>
    <script src="https://github.jspm.io/jmcriffey/[email protected]/traceur-runtime.js"></script>
    <script src="https://jspm.io/[email protected]"></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我只能看到

Everything compiles but in the browser I am getting empty screen. As html I can see only

<html><head>
    <title>Angular 2 Quickstart</title>
    <script src="https://github.jspm.io/jmcriffey/[email protected]/traceur-runtime.js"></script><style type="text/css"></style>
    <script src="https://jspm.io/[email protected]"></script><script type="text/javascript" src="https://jspm.io/[email protected]" 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>

我在做什么错了？

What am I doing wrong?

有时在控制台编译后显示了以下问题：

And sometimes after compilation in the console shows up following problem:

原始异常：无基本href集。无论是提供一个结合appBaseHrefToken或添加一个基本元素。

ORIGINAL EXCEPTION: No base href set. Either provide a binding to "appBaseHrefToken" or add a base element.

但它是相当随机的。

推荐答案

下面的几个问题：

这似乎并不认为你加载路由器文件。他们可以在，在其他地方。

It doesn't seem that you're loading the router files. They can be found at code.angularjs.org, among other places.

有关如何使用角2路由器结账的。

For a more complete view on how to use the Angular 2 router checkout the Meteor-Angular2 Tutorial.

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

Currently the default HTML5LocationStrategy seems to have a lot of issues, I would suggest setting the HashLocationStrategy in your app.

在你的根应用程序文件，导入所需的文件：

In your root app file, import the necessary files:

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

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

Then bind to the location when bootstrapping:

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

更新

routerInjectables 改为 ROUTER_PROVIDERS

绑定改为提供

routerInjectables was changed to ROUTER_PROVIDERS
bind was changed to provide

的来源：的

[email protected]/CHANGELOG.md

这篇关于Angular2 + Typescript1.5路由的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！