Angular 2 中的哈希定位策略答案

【问题标题】：Hash Location Strategy in Angular 2Angular 2 中的哈希定位策略
【发布时间】：2016-04-05 14:20:56
【问题描述】：

我正在尝试使用散列位置策略创建应用程序，但它不会将散列添加到 url。例如，当我单击与 { path: '/polls', name: 'Polls', component: PollsComponent } 关联的按钮时，它会使用此 url 加载页面：localhost:3000/polls。

要获得哈希位置策略，我必须进行哪些更改？如果我想使用哈希定位策略，为什么我必须设置默认的 base 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 { }

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

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

]);

【问题讨论】：

标签： javascript angular angular2-routing

【解决方案1】：

您可以在 RouterModule.forRoot() 中使用“useHash”选项。

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

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

【讨论】：

这对我有帮助，因为这更适合 Angular 2 final（我在 2.2.3 上）。所有其他答案都适用于旧版本的 Angular 2。

【解决方案2】：

ROUTER_PROVIDERS 应该不添加到子组件中，

仅到

providers: [ROUTER_PROVIDERS]

或或者仅到

bootstrap(AppComponent, [ROUTER_PROVIDERS]);

HTTP_PROVIDERS 在我看来也更适合根组件或bootstrap()，但在其他地方添加它们并不会破坏任何东西。

（另见Routing error with angular 2 and IIS）

【讨论】：

【解决方案3】：

使用发布的示例代码 OP 一切正常，与接受的答案中的内容一样。但作为一个小提示，从 RC.4 开始，在引导文件中更改哈希位置策略所需的格式如下：

{ provide: LocationStrategy, useClass: HashLocationStrategy },

【讨论】：

【解决方案4】：

Angular中推荐使用HTML 5风格（PathLocationStrategy）作为定位策略

因为

它生成干净且对 SEO 友好的 URL，对用户来说更容易理解和记住。
您可以利用服务器端渲染，这将使通过在服务器中渲染页面，我们的应用程序加载速度更快首先在交付给客户之前。

仅当您必须支持旧版本时才使用 Hashlocationstrtegy 浏览器。

Click Here for More info

【讨论】：

你误会了。