HashLocationStrategy nie generuje # lokalizacji podczas routingu?

Question

Używam wersji beta programu Angular 2 i mam problem z routingiem. Oto co mam

AppComponent:

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

Każdy poradnik i odniesienie API wydaje się wskazywać na mnie robi to tylko jak mam powyżej. Mam także <base href="/app/" /> w nagłówku mojego pliku index.html. Oto moja instrukcja routingu zachowując się tak, jak powinna. Nie otrzymuję błędów. Kiedy klikam jeden z tych wpisów w pasku początkowym bootstrap, widzę, że widoki się wyłączyły i wyświetlają odpowiednie szablony oraz że ich Komponenty są uruchomione i są powiązane. Jednak mimo użycia HashLocationStrategy w moim zgłoszeniu bootstrap(...), adresy URL są nadal "Styl HTML5": localhost:8080/app/Rows, kiedy powinno być localhost:8080/app/#/Rows.

Wydaje mi się, że muszę używać starego stylu opartego na #, jeśli chcę, aby moi użytkownicy mogli utworzyć zakładkę konkretnego widoku i wrócić do niego. Jeśli pozwolę na /app/Rows, odświeżenie strony spowoduje 404, ponieważ Rows nie istnieje w folderze app.

Answer 1

Próbowałem swój kod, to działa

mojego kodu poniżej:

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 { } 

znajdę twój problem, usuń thi s linia

providers : [ROUTER_PROVIDERS] 

szczegóły nie wiem dlaczego, może nie kątowej nie może przetworzyć gdy używasz ROUTERPROVIDERS dwukrotnie, czeka ktoś może pomóc u

Answer 2

Zgodnie Kątowymi 2 ostatecznej wersji masz zawierać LocationStrategy używać HashLocationStrategy klasy poprzez umieszczenie go wewnątrz dostawców głównego @NgModule wykonując {provide: LocationStrategy, useClass: HashLocationStrategy}

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 {}