Javascript Angular 2中的哈希定位策略

我正在尝试使用哈希定位策略创建一个应用程序，但它不会将哈希添加到url。例如，当我单击与{path:'/polls'，name:'polls'，component:PollsComponent}相关联的按钮时，它将使用以下url加载页面：localhost:3000/polls

要获得哈希定位策略，我必须更改什么？ 如果要使用哈希定位策略，为什么必须设置默认的基本url

这是app.component.ts中的路由，其中定义了所有路由：

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

这是我的main.ts，我在这里配置基本url：

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: '/' })

]);

---

ROUTER\u提供者

不应添加到子组件中

仅至

providers: [ROUTER_PROVIDERS]

或或者仅至

bootstrap(AppComponent, [ROUTER_PROVIDERS]);

HTTP\u提供程序

在我看来也更适合根组件或

bootstrap（）

，但将它们添加到其他地方不会破坏任何功能

---

（另请参见）

与已接受答案中的示例代码OP一起发布，一切都很顺利。但作为一个次要的注意事项，从RC.4开始更改引导文件中的哈希位置策略所需的格式如下：

{ provide: LocationStrategy, useClass: HashLocationStrategy },

您可以在RouterModule.forRoot（）中使用选项“useHash”

建议使用HTML 5样式（PathLocationStrategy）作为Angular中的位置策略

因为

它产生了干净和搜索引擎优化友好的网址，更容易为用户 理解和记住

您可以利用服务器端渲染，这将使 通过在服务器中呈现页面，我们的应用程序加载速度更快 首先在交付给客户之前

仅当您必须支持较旧版本时，才使用hashLocationStretcy 浏览器

---

这对我很有帮助，因为这更适合Angular 2决赛（我在2.2.3）。所有其他答案都适用于Angular 2的旧版本。你有一个巨大的误解。

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