HashLocationStrategy, yönlendirme yaparken # konum üretmiyor?

Question

Angular 2 beta.0'ı çalıştırıyorum ve yönlendirmeyle uğraşıyorum. İşte

AppComponent var ne:

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

öğretici ve API referans yukarıda yaptığım gibi beni yapıyor, işaret gibi görünüyor Her. Ayrıca, index.html sayfamın başında <base href="/app/" /> var. Burada olması gerektiği gibi benim 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> 

yönlendirme davranır vardır. Hata alamıyorum. Bootstrap nav-çubuğundaki bu girişlerden birini tıkladığımda, görünümlerin değiştirildiğini ve uygun şablonları gösterdiklerini ve Bileşenlerinin çalışıp bağlı olduklarını görüyorum. Ancak, HashLocationStrategy'u bootstrap(...) numaralı aramamıza rağmen, URL'ler hala "HTML5 Stili": localhost:8080/app/Rows, localhost:8080/app/#/Rows olması gerektiğinde.

Kullanıcılarımın belirli bir görünümü işaretleyip geri gelebilmelerini istiyorsanız, eski # temelli yolu kullanmam gerektiğini düşünüyorum. /app/Rows için izin verirseniz, sayfanın yenilenmesi klasöründe app klasöründe bulunmadığından bir 404 neden olur.

Ben kodunuzu çalıştı

Answer 1

, çalışıyor

aşağıda

kodum:

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

ı bulmak senin sorunun, thi silmek Eğer ileriye dönük, iki kez ROUTERPROVIDERS kullanırken lar hat

providers : [ROUTER_PROVIDERS] 

ayrıntıları Birisi var Açısal 2 final sürümü gereğince u

Answer 2

neden yardımcı olabileceğini belki açısal olamaz değil sürecini bilmiyoruz {provide: LocationStrategy, useClass: HashLocationStrategy}

yaparak ana @NgModule sağlayıcıları içine koyarak HashLocationStrategy sınıfını kullanmak LocationStrategy dahil etmek 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 {}