Angular2 Component Router基本的な問題

angular2ベータコンポーネントルーティングの学習を開始しました。私はこれまでこれをしてきました。Angular2 Component Router基本的な問題

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

私は必要なのCDN次コピーされています。こちらをご覧ください。

<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 /コーン

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"); 
    } 
    }

デベロッパーコンソールを確認してください。エラーが発生する

例外：LocationStrategyのインスタンス化中にエラーが発生しました！（RouterLink - > Router - > Location - > LocationStrategy）.BrowserDomAdapter.logError @ angular2.dev.js：23514 angular2.dev.js：23514 ORIGINAL EXCEPTION：ベースhrefが設定されていません。 APP_BASE_HREFトークンの値を指定するか、ドキュメントに基本要素を追加してください。

さらに、私を宛先にリダイレクトしません。 < base href = "/">を追加しようとしましたが、エラーが発生します。

リンクが適切に動作します。

出典

2016-01-07 nyks

エラーメッセージ「それはエラーを与え、中には...」とは？でROUTING & NAVIGATION developer guideで –

私はあなたのためにplnkrを作った。それを実行し、ブラウザのコンソールをチェックインしてください。単一のエラーはありません。 – nyks

''はどこに追加しましたか？ –

のどちらかが<base href="/"><head>要素に追加したり、Nyksで編集

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

回答ブートストラップするAPP_BASE_HREFを追加します、私は以下の部分を更新した私のplunkerで

を

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

最終回答：http://plnkr.co/edit/4YWWGhuBWd2CoWpC3GeY?p=preview

も参照してくださいhttp://plnkr.co/edit/iRUP8B5OUbxCWQ3AcIDm?p=info

とangular.io

出典

2016-01-07 11:27:55

Angular2 Component Router基本的な問題

答えて

関連する問題