Javascript Angular 2 中的哈希定位策略

Hash Location Strategy in Angular 2

提问by Diego Unanue

I'm trying to create an application with hash location strategy, but it does not add the hash to the url. For instance when I click on a button associated with { path: '/polls', name: 'Polls', component: PollsComponent } it loads the page with this url : localhost:3000/polls.

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

What do I have to change to get the hash location strategy? Why do I have to set the default base url if I want to use hash location strategy?

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

This is the routing in the app.component.ts where all the routing is defined:

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

And this is my main.ts where I configure the base url:

这是我的 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: '/' })

]);

采纳答案by Günter Z?chbauer

ROUTER_PROVIDERSshould notbe added to child components,

ROUTER_PROVIDERS应该不会被添加到子组件，

onlyto

只为

providers: [ROUTER_PROVIDERS]

oralternatively onlyto

或可替代地只对

bootstrap(AppComponent, [ROUTER_PROVIDERS]);

HTTP_PROVIDERSare in my opinion also a better fit for root component or bootstrap()but it doesn't break anything to add them somewhere else.

HTTP_PROVIDERS在我看来，它也更适合根组件，或者bootstrap()将它们添加到其他地方不会破坏任何内容。

(See also Routing error with angular 2 and IIS)

（另请参阅angular 2 和 IIS 的路由错误）

回答by Lievno

You can use the option "useHash" in RouterModule.forRoot().

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

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

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

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

回答by Lucio Mollinedo

Everything worked fine with the sample code OP posted as with what is in the accepted answer. But as a minor note, the format required to changing the Hash Location Strategy in the bootstrap file as of RC.4 goes like this:

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

{ provide: LocationStrategy, useClass: HashLocationStrategy },

回答by Mahendra Waykos

It is recommended to use the HTML 5 style (PathLocationStrategy) as location strategy in Angular

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

Because

因为

1. It produces the clean and SEO Friendly URLs that are easier for users to understand and remember.
2. You can take advantage of the server-side rendering, which will make our application load faster, by rendering the pages in the server first before delivering it the client.

1. 它生成干净且 SEO 友好的 URL，用户更容易理解和记住。
2. 您可以利用服务器端渲染，这将使我们的应用程序加载速度更快，方法是先在服务器中渲染页面，然后再将其交付给客户端。

Use Hashlocationstrtegyonly if you have to support the older browsers.

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

Click Here for More info

点击这里获取更多信息