Angular2 Component Router grundlegendes Problem

Begann Lernen Winkel2 Beta-Komponenten-Routing. Ich habe das bisher gemacht.Angular2 Component Router grundlegendes Problem

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

Ich habe folgende erforderlich CDNs kopiert. Bitte schaue hier nach.

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

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 Instantiierung von LocationStrategy! (RouterLink -> Router -> Standort -> LocationStrategy) .BrowserDomAdapter.logError @ angular2.dev.js: 23514 angular2.dev.js: 23514 ORIGINAL AUSNAHME: Keine Base href gesetzt. Geben Sie einen Wert für das Token APP_BASE_HREF an, oder fügen Sie dem Dokument ein Basiselement hinzu.

und zusätzlich leitet es mich nicht zum Ziel um. Ich habe versucht, < base href = "/"> hinzuzufügen, aber es gibt einen Fehler.

Ich möchte Links richtig funktionieren.

Quelle

2016-01-07 nyks

Was ist die Fehlermeldung: „Es gibt einen Fehler und in ...“? –

Ich habe PLNKR für Sie gemacht. Führen Sie es aus und überprüfen Sie die Browser-Konsole. hat keinen einzigen Fehler. – nyks

Wo haben Sie die ''? –

Entweder die <base href="/"> zum <head> Element hinzufügen oder APP_BASE_HREF hinzufügen

bootstrap(AppComponent, [ 
    ROUTER_PROVIDERS, 
    // usually 
    provide(APP_BASE_HREF, {useValue: '/'}) 
    // for Plunker 
    // bind(APP_BASE_HREF).toValue(location.pathname) 
]);

Antwort von Nyks Herausgegeben Bootstrap:

In meinem Plunker ich folgende Teile aktualisiert haben,

import {Component,bind} from 'angular2/core'; 
import {ROUTER_PROVIDERS,RouteConfig, ROUTER_DIRECTIVES,APP_BASE_HREF,LocationStrategy,RouteParams,ROUTER_BINDINGS} from 'angular2/router'; 

export class AppComponent { } 

    bootstrap(AppComponent, [ 
     ROUTER_PROVIDERS,bind(APP_BASE_HREF).toValue(location.pathname) 
]);

endgültige Antwort: http://plnkr.co/edit/4YWWGhuBWd2CoWpC3GeY?p=preview

Siehe auch bei http://plnkr.co/edit/iRUP8B5OUbxCWQ3AcIDm?p=info

und die ROUTING & NAVIGATION developer guide bei angular.io

Quelle

2016-01-07 11:27:55

Angular2 Component Router grundlegendes Problem

Antwort

Verwandte Themen