HashLocationStrategy erzeugt keine # Positionen beim Routing?

Question

Ich laufe die Angular 2 Beta.0 und ich bin mit Routing herumspielen. Hier ist, was ich

AppComponent haben:

import {Component, provide} from 'angular2/core'; 
import {bootstrap} from 'angular2/platform/browser'; 
import {FORM_DIRECTIVES, CORE_DIRECTIVES} from 'angular2/common'; 
import {Http, Response, HTTP_PROVIDERS} from 'angular2/http'; 
import {RouteConfig, Location, LocationStrategy, HashLocationStrategy, ROUTER_DIRECTIVES, ROUTER_PROVIDERS} from 'angular2/router'; 

import {HomeComponent} from './components/home'; 
import {RowsComponent} from './components/rows'; 
import {ColumnsComponent} from './components/columns'; 
import {TableComponent} from './components/table'; 

@Component({ 
    selector: 'app', 
    directives: [FORM_DIRECTIVES, CORE_DIRECTIVES, ROUTER_DIRECTIVES], 
    templateUrl: '/app/views/root.html', 
    providers: [ROUTER_PROVIDERS] 
}) 
@RouteConfig([ 
    {path:'/',  name: 'Home',  component: HomeComponent}, 
    {path:'Rows', name: 'Rows',  component: RowsComponent}, 
    {path:'Columns', name: 'Columns', component: ColumnsComponent}, 
    {path:'Table', name: 'Table', component: TableComponent} 
]) 
class AppComponent { 
    public title = 'Responsive Layout'; 
    public SelectedTab = 'Home'; 

    constructor(location: Location) { 
    //location.go('Rows'); 
    } 
} 

bootstrap(AppComponent, [ 
    ROUTER_PROVIDERS, 
    provide(LocationStrategy, {useClass: HashLocationStrategy}) 
]); 

Jedes Tutorial und API-Referenz-zu-Punkt scheint mir es nur tun, wie ich oben haben. Ich habe auch <base href="/app/" /> im Kopf meiner index.html. Hier sind meine RouterLinks

<ul class="nav navbar-nav"> 
    <li [class.active]="SelectedTab=='Home'"><a [routerLink]="['Home']" (click)="SelectedTab='Home'">Home</a></li> 
    <li [class.active]="SelectedTab=='Rows'"><a [routerLink]="['Rows']" (click)="SelectedTab='Rows'">Rows</a></li> 
    <li [class.active]="SelectedTab=='Columns'"><a [routerLink]="['Columns']" (click)="SelectedTab='Columns'">Columns</a></li> 
    <li [class.active]="SelectedTab=='Table'"><a [routerLink]="['Table']" (click)="SelectedTab='Table'">Table</a></li> 
    </ul> 

Das Routing verhält, wie es sollte. Ich bekomme keine Fehler. Wenn ich auf einen dieser Einträge in der Bootstrap-Navigationsleiste klicke, sehe ich, dass die Ansichten ausgewechselt wurden und die richtigen Vorlagen zeigen und dass ihre Komponenten ausgeführt wurden und an die sie gebunden sind. Trotz der Verwendung von HashLocationStrategy in meinem bootstrap(...) Aufruf sind die URLs immer noch "HTML5 Style": localhost:8080/app/Rows, wenn es localhost:8080/app/#/Rows sein sollte.

Ich glaube, ich muss den alten # basierten Weg verwenden, wenn ich möchte, dass meine Benutzer in der Lage sind, eine bestimmte Ansicht zu markieren und zu ihr zurückzukehren. Wenn ich für /app/Rows erlaube, verursacht das Aktualisieren der Seite eine 404, da Rows nicht in dem app-Ordner vorhanden ist.

Answer 1

ich Ihren Code versucht, es funktioniert

meinen Code unten:

boot.ts

import {bootstrap} from 'angular2/platform/browser' 
import {provide} from 'angular2/core'; 
import {AppComponent} from './app.component' 
import {ROUTER_PROVIDERS, LocationStrategy, 
     HashLocationStrategy, 
     PathLocationStrategy, 
     APP_BASE_HREF, } from 'angular2/router' 


bootstrap(AppComponent,[ 
    ROUTER_PROVIDERS, 
    provide(APP_BASE_HREF, { useValue: '/' }), 
    provide(LocationStrategy, {useClass : HashLocationStrategy}) 
]); 

-

app.ts

import {Component} from 'angular2/core'; 
import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router'; 

@Component({ 
    selector:'second', 
    template: `<h1>second</h1>` 
}) 

export class SecondComponent{} 

@Component({ 
    selector: 'home', 
    template: `<h1>hello</h1>` 
}) 

export class HomeComponent{} 

@Component({ 
    directives : [ROUTER_DIRECTIVES], 
    selector: 'my-app', 
    template: 
    `<a [routerLink]="['Home']">home</a> 
    <a [routerLink]="['Second']">Second</a> 
    <router-outlet></router-outlet> 
    ` 
}) 


@RouteConfig([ 
    {path :'/' ,name: 'Home', component: HomeComponent}, 
    {path :'/second', name : 'Second', component : SecondComponent} 

    ]) 

export class AppComponent { } 

Ich finde dein problem, lösche thi s Linie

providers : [ROUTER_PROVIDERS] 

die Details Ich weiß nicht, warum, vielleicht Winkel kann nicht nicht verarbeiten, wenn Sie ROUTERPROVIDERS zweimal verwenden, freuen uns jemand u helfen kann

Answer 2

Wie pro Angular 2 endgültige Version Sie haben enthalten LocationStrategyHashLocationStrategy Klasse zu verwenden, indem es innerhalb Anbieter von Haupt @NgModule indem {provide: LocationStrategy, useClass: HashLocationStrategy}

setzen app.module.ts

import {Component, NgModule} from '@angular/core'; 
import { 
    LocationStrategy, 
    HashLocationStrategy 
} from '@angular/common'; 
@NgModule({ 
    imports: [...], //put module to import here 
    declarations: [...], //put all component, pipe & directive 
    exports: [...], //module to export 
    //providers should reside here 
    providers: [{provide: LocationStrategy, useClass: HashLocationStrategy}] 
}) 
class AppModule {}