Angular中的哈希定位策略2 [英] Hash Location Strategy in Angular 2
问题描述
我正在尝试使用哈希位置策略创建应用程序,但它不会将哈希添加到网址中。例如,当我点击与{path:'/ polls'相关联的按钮,名称:'Polls',组件: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
不应添加到子组件,
仅到
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.
(另请参见带角度2和IIS的路由错误)
这篇关于Angular中的哈希定位策略2的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!