Hash Location Strategie in Angular 2

Question

Ich versuche, eine Anwendung mit Hash-Standort Strategie zu erstellen, aber es fügt den Hash nicht zur URL hinzu. Wenn ich zum Beispiel auf eine Schaltfläche klicke, die mit {Pfad: '/ Umfragen', Name: 'Umfragen', Komponente: Umfrageinfo} verknüpft ist, lädt sie die Seite mit dieser URL: localhost: 3000/Umfragen.

Was muss ich ändern, um die Hash-Standort-Strategie zu erhalten? Warum muss ich die Standard-Basis-URL festlegen, wenn ich die Hash-Standortstrategie verwenden möchte?

Dies ist das Routing in dem app.component.ts wo alle Routing definiert:

import {Component} from 'angular2/core' 

import {HTTP_PROVIDERS, Http} from 'angular2/http'; 
import 'rxjs/Rx'; // load the full rxjs 
import {ROUTER_PROVIDERS, RouteConfig , ROUTER_DIRECTIVES} from 'angular2/router'; 

import { ResultsComponent } from './results/results.component' 
import { VotingCardsComponent } from  './votingcards/votingcards.component' 
import { DashBoardComponent } from './dash/dash.component' 
import { PollsComponent } from './pollslist/pollslist.component' 

@Component({ 
selector: 'my-app', 
templateUrl: 'app/app.component.html', 
directives: [ROUTER_DIRECTIVES, ResultsComponent, VotingCardsComponent, DashBoardComponent], 
providers: [HTTP_PROVIDERS, 
ROUTER_PROVIDERS] 
}) 

@RouteConfig([ 

    { path: '/vote', name: 'VotePage', component: VotingCardsComponent }, 
    { path: '/votepoll/:id', name: 'VotePoll', component: VotingCardsComponent }, 
    { path: '/results', name: 'Results', component: ResultsComponent }, 
    { path: '/polls', name: 'Polls', component: PollsComponent }, 
    { path: '/', name: 'DashBoard', component: DashBoardComponent, useAsDefault: true } 
]) 

export class AppComponent { } 

Und das ist mein main.ts, wo ich die Basis-URL konfigurieren:

import {bootstrap} from 'angular2/platform/browser'; 
import {AppComponent} from './app.component'; 

//this is to avoid the href empty issue 
import {provide} from 'angular2/core'; 
import {APP_BASE_HREF, ROUTER_PROVIDERS} from 'angular2/router'; 

    bootstrap(AppComponent, [ 
    //this is to avoid the href empty issue 
    ROUTER_PROVIDERS, 
    provide(LocationStrategy, { useClass: HashLocationStrategy }), 
    provide(APP_BASE_HREF, { useValue: '/' }) 

]); 

Answer 1

ROUTER_PROVIDERS sollte nicht zu geordneten Komponenten hinzugefügt werden,

nur bis

providers: [ROUTER_PROVIDERS] 

oder alternativ nur zu

bootstrap(AppComponent, [ROUTER_PROVIDERS]); 

HTTP_PROVIDERS sind meiner Meinung nach auch eine bessere Passform für Wurzelkomponente oder bootstrap() aber es macht nichts kaputt machen sie woanders hinzufügen .

(Siehe auch Routing error with angular 2 and IIS)

Answer 2

Alles funktionierte mit dem Beispielcode OP fein geschrieben wie mit dem, was in der akzeptierten Antwort ist. Aber als Nebennote, das Format erforderlich ist, um die Hash-Ort-Strategie zu ändern in der Bootstrap-Datei ab RC.4 so geht:

{ provide: LocationStrategy, useClass: HashLocationStrategy }, 

Answer 3

können Sie verwenden, um die Option „useHash“ in RouterModule.forRoot().

RouterModule.forRoot(appRoutes, {useHash: true}); 

https://discuss.atom.io/t/angular-2-routes-breaking-on-electron-app-refresh/28370/4

Answer 4

Es wird empfohlen, in den HTML-5-Stil (PathLocationStrategy) als Standortstrategie zu verwenden Angular

Da

1. Es erzeugt die sauberen und SEO Friendly URLs, die für Benutzer einfacher sind, zu verstehen und zu erinnern .
2. Sie können das serverseitige Rendering nutzen, wodurch unsere Anwendung schneller geladen wird, indem Sie zuerst die Seiten im Server rendern, bevor Sie den Client bereitstellen.

Verwenden Hashlocationstrtegy nur, wenn Sie die älteren Browsern zu unterstützen haben.

Click Here for More info