Angular 2 中的哈希定位策略 [英] Hash Location Strategy in Angular 2

问题描述

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

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.

我需要更改什么才能获得哈希位置策略?如果我想使用哈希定位策略，为什么我必须设置默认的基本网址?

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?

这是 app.component.ts 中定义的所有路由的路由:

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

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:

And this is my main.ts where I configure the base 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_PROVIDERS 应该不添加到子组件中，

ROUTER_PROVIDERS should not be added to child components,

仅到

providers: [ROUTER_PROVIDERS]

或或者仅

bootstrap(AppComponent, [ROUTER_PROVIDERS]);

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

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

(另见 angular 2 和 IIS 的路由错误)

这篇关于Angular 2 中的哈希定位策略的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！