我尝试使用哈希位置策略创建应用程序,但它不会将哈希添加到网址。例如,当我点击与{path:' / polls',name:' Polls',component:PollsComponent}关联的按钮时,它会使用以下网址加载页面:localhost:3000 /轮询。
我需要更改以获取哈希位置策略? 如果我想使用哈希位置策略,为什么我必须设置默认的基本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 { }
这是我的主要配置基本网址:
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: '/' })
]);
答案 0 :(得分:34)
您可以在RouterModule.forRoot()中使用“useHash”选项。
RouterModule.forRoot(appRoutes, {useHash: true});
https://discuss.atom.io/t/angular-2-routes-breaking-on-electron-app-refresh/28370/4
答案 1 :(得分:6)
ROUTER_PROVIDERS
不应添加到子组件
仅到
providers: [ROUTER_PROVIDERS]
或或仅到
bootstrap(AppComponent, [ROUTER_PROVIDERS]);
HTTP_PROVIDERS
在我看来也更适合根组件或bootstrap()
,但它不会破坏任何东西以将它们添加到其他地方。
答案 2 :(得分:5)
一切正常,样本代码OP发布,与接受的答案中的内容一致。但作为次要注释,从RC.4开始,在引导程序文件中更改哈希位置策略所需的格式如下:
{ provide: LocationStrategy, useClass: HashLocationStrategy },
答案 3 :(得分:-4)
建议在Angular中使用HTML 5样式(PathLocationStrategy)作为位置策略
<强>由于强>
仅在您必须支持旧版时才使用 Hashlocationstrtegy 浏览器。