文章/答案/技术大牛

发布

问Angular2 + Typescript1.5路由
EN

Stack Overflow用户

提问于 2015-08-13 19:44:48

回答 1查看 1.6K关注 0票数 1

我正在尝试运行一个测试应用程序，以了解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“的绑定，要么添加一个基本元素。

但这是随机的。

angular

typescript1.5

回答 1

Stack Overflow用户

回答已采纳

发布于 2015-08-14 06:52:05

这里有几个问题：

似乎你并不是在加载路由器文件。它们可以在code.angularjs.org和其他地方找到。

有关如何使用角2路由器的更完整的视图，请检查流星-安古拉2教程。

目前默认的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

来源：

角@2.0.0-α.41/CHANGELOG.md

票数 4

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/31997098

复制

相似问题

问Angular2 + Typescript1.5路由
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Angular2 + Typescript1.5路由EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Angular2 + Typescript1.5路由
EN