Angular2 Komponente-Router-grundlegende Frage

Angefangen zu lernen angular2 beta-Komponente routing. Ich habe dies getan so weit.

http://plnkr.co/edit/4YWWGhuBWd2CoWpC3GeY?p=preview

Habe ich kopiert folgenden erforderlichen CDNs. bitte haben Sie einen Blick hier.

    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.0/angular2-polyfills.js"></script>
    <script src="https://rawgithub.com/systemjs/systemjs/0.19.6/dist/system.js"></script>
    <script src="https://code.angularjs.org/tools/typescript.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.0/Rx.js"></script>


    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.0/angular2.dev.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.0/router.dev.js"></script>

src/boot.ts

import {Component} from 'angular2/core';
import {ROUTER_PROVIDERS,RouteConfig, ROUTER_DIRECTIVES,LocationStrategy} from 'angular2/router';
import {bootstrap}        from 'angular2/platform/browser';

import{ComponentOne} from 'src/cone';
import{ComponentTwo} from 'src/ctwo';

@Component({
  selector: 'my-app',
  template: `
    <h1>Component Router</h1>
    <nav>
      <a [routerLink]="['ComponentOne']">One</a><hr/>
      <a [routerLink]="['ComponentTwo']">Two</a>
    </nav>
    <router-outlet></router-outlet>
  `,
  directives: [ROUTER_DIRECTIVES]
})
@RouteConfig([
  {path:'/component-one', name: 'ComponentOne', component: ComponentOne},
  {path:'/component-two', name: 'ComponentTwo', component: ComponentTwo}
])
export class AppComponent { }

    bootstrap(AppComponent, [
      ROUTER_PROVIDERS
]);

src/Kegel

 import {Component,View} from 'angular2/core';

 @Component({
    template: `
    <h1>first Component</h1>
    `
  })

  export class ComponentOne{
    constructor(){

      console.log("first component being called");
    }
  }

src/ctwo

 import {Component,View} from 'angular2/core';

 @Component({
    template: `
    <h1>Second Component</h1>
    `
  })

  export class ComponentTwo{
    constructor(){

      console.log("Second component being called");
    }
  }

Bitte überprüfen Sie Ihre dev-Konsole. Es gibt einen Fehler,

AUSNAHME: Fehler bei der Instanziierung von LocationStrategy! (RouterLink -> Router -> Location -> LocationStrategy).BrowserDomAdapter.logerror keinen Sinn @ angular2.dev.js:23514
angular2.dev.js:23514 ORIGINAL-AUSNAHME: Keine base href gesetzt werden. Bitte geben Sie einen Wert für die APP_BASE_HREF token oder fügen Sie ein base-element im Dokument.

und darüber hinaus nicht umleiten mir zum Ziel.
Ich habe versucht, hinzufügen < base href="/" >aber es ermöglicht es gibt einen Fehler.

Möchte ich links zu funktionieren.

  • Was ist die Fehlermeldung "Es gibt einen Fehler, und in ..."?
  • Habe ich gemacht plnkr für Sie. starten Sie es und überprüfen Sie im browser die Konsole. nicht einzelne Fehler.
  • Wo hast du das hinzufügen der <base href="/">?
  • Ich habe es unten auf die Kopf-tag, aber dann ist es nicht zeigen, erste Seite.
  • Es sollte Hinzugefügt werden, innerhalb der <head> tag aber Plunker braucht eine andere Strategie sowieso. Ich versuche es nachschlagen
  • Danke für die info.

InformationsquelleAutor nyks | 2016-01-07
Schreibe einen Kommentar