Angular2 + Typescript1.5 Routing

2019-08-10 21:53发布

站内问答 / Angular
833 1 6

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

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

What am I doing wrong?

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

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

but it is quite random.

1条回答
\"骚年 ilove
2楼-- · 2019-08-10 21:57

A few issues here:

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

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

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)
]);

Update

  • routerInjectables was changed to ROUTER_PROVIDERS
  • bind was changed to provide

Source:

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)