Angular2 Component Router grunnleggende problemet

stemmer
8

Begynte å lære angular2 beta komponent ruting. Jeg har gjort dette så langt.

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

Jeg har kopiert følgende nødvendige CDNs. ta en titt her.

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

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

Vennligst sjekk dev konsollen. Det gir en feil

UNNTAK: Feil under oppretting av LocationStrategy! (RouterLink -> Router -> Plassering -> LocationStrategy) .BrowserDomAdapter.logError @ angular2.dev.js: 23514 angular2.dev.js: 23514 ORIGINAL unntak: ingen base href sett. Oppgi en verdi for APP_BASE_HREF token eller legge en base element i dokumentet.

og i tillegg er det ikke omdirigere meg til mål. Jeg har forsøkt å legge <basis href = /> men den tillater gir en feil.

Jeg ønsker linker til å fungere ordentlig.

Publisert på 07/01/2016 klokken 09:14
kilden bruker
På andre språk...                            


1 svar

stemmer
15

Enten legge den <base href="/">til <head>element eller legge APP_BASE_HREFtil bootstrap

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

Svar redigert av Nyks:

I min plunker har jeg oppdatert følgende deler,

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

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

Se også http://plnkr.co/edit/iRUP8B5OUbxCWQ3AcIDm?p=info

og utbygger Rute & NAVIGASJON på på angular.io

Svarte 07/01/2016 kl. 09:27
kilden bruker

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more