कोणीय 2 घटक राउटर मूल समस्या

सीखने कोणीय 2 बीटा घटक रूटिंग शुरू किया। मैंने अभी तक यह किया है।कोणीय 2 घटक राउटर मूल समस्या

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

मैं आवश्यक CDNs निम्नलिखित नकल की है। कृपया यहां एक नज़र डालें।

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

कृपया अपने देव कंसोल की जांच करें। यह एक त्रुटि देता है

छूट: स्थानस्ट्रेटी के तत्कालता के दौरान त्रुटि! (राउटरलिंक -> राउटर -> स्थान -> स्थानस्ट्रेटी) .BrowserDomAdapter.logError @ angular2.dev.js: 23514 angular2.dev.js: 23514 मूल अभिव्यक्ति: कोई आधार href सेट नहीं है। कृपया APP_BASE_HREF टोकन के लिए एक मान प्रदान करें या दस्तावेज़ में मूल तत्व जोड़ें।

और इसके अतिरिक्त यह मुझे गंतव्य तक रीडायरेक्ट नहीं करता है। मैंने < बेस href = "/"> जोड़ने की कोशिश की है लेकिन यह एक त्रुटि देता है।

मैं लिंक ठीक तरह से काम करना चाहता हूं।

स्रोत

2016-01-07 nyks

क्या त्रुटि संदेश है पर पर ROUTING & NAVIGATION developer guide देखें "यह एक त्रुटि और में देता है ..."? –

मैंने आपके लिए plnkr बनाया है। इसे चलाएं और ब्राउज़र के कंसोल में जांचें। एक त्रुटि नहीं है। – nyks

आपने ' 'कहां जोड़ा? –

या तो <base href="/"><head> तत्व को जोड़ने के लिए या bootstrap करने के लिए

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

कोणीय 2 घटक राउटर मूल समस्या

उत्तर

संबंधित मुद्दे