Angular 2 中的哈希位置策略
Hash Location Strategy in Angular 2
我正在尝试使用散列位置策略创建一个应用程序,但它不会将散列添加到 url。例如,当我单击与 { path: '/polls', name: 'Polls', component: PollsComponent } 关联的按钮时,它会加载带有此 url 的页面:localhost:3000/polls。
我必须更改什么才能获得哈希位置策略?
为什么我要使用哈希定位策略必须设置默认基数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 { }
这是我的 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: '/' })
]);
ROUTER_PROVIDERS
应该 不 添加到子组件,
仅到
providers: [ROUTER_PROVIDERS]
或或者仅到
bootstrap(AppComponent, [ROUTER_PROVIDERS]);
HTTP_PROVIDERS
在我看来也更适合根组件或 bootstrap()
但将它们添加到其他地方不会破坏任何东西。
(另见 Routing error with angular 2 and IIS)
OP 发布的示例代码与接受的答案中的内容一样,一切正常。但需要注意的是,从 RC.4 开始,更改 bootstrap 文件中的哈希位置策略所需的格式如下所示:
{ provide: LocationStrategy, useClass: HashLocationStrategy },
您可以在 RouterModule.forRoot() 中使用选项 "useHash"。
RouterModule.forRoot(appRoutes, {useHash: true});
https://discuss.atom.io/t/angular-2-routes-breaking-on-electron-app-refresh/28370/4
It is recommended to use the HTML 5 style (PathLocationStrategy) as location strategy in Angular
因为
- 它生成干净且 SEO 友好的 URL,对用户来说更容易
去理解和记住。
- 您可以利用服务器端渲染,这将使
通过在服务器中呈现页面,我们的应用程序加载速度更快
先交付给客户。
Use Hashlocationstrtegy only if you have to support the older
browsers.
我正在尝试使用散列位置策略创建一个应用程序,但它不会将散列添加到 url。例如,当我单击与 { path: '/polls', name: 'Polls', component: PollsComponent } 关联的按钮时,它会加载带有此 url 的页面:localhost:3000/polls。
我必须更改什么才能获得哈希位置策略? 为什么我要使用哈希定位策略必须设置默认基数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 { }
这是我的 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: '/' })
]);
ROUTER_PROVIDERS
应该 不 添加到子组件,
仅到
providers: [ROUTER_PROVIDERS]
或或者仅到
bootstrap(AppComponent, [ROUTER_PROVIDERS]);
HTTP_PROVIDERS
在我看来也更适合根组件或 bootstrap()
但将它们添加到其他地方不会破坏任何东西。
(另见 Routing error with angular 2 and IIS)
OP 发布的示例代码与接受的答案中的内容一样,一切正常。但需要注意的是,从 RC.4 开始,更改 bootstrap 文件中的哈希位置策略所需的格式如下所示:
{ provide: LocationStrategy, useClass: HashLocationStrategy },
您可以在 RouterModule.forRoot() 中使用选项 "useHash"。
RouterModule.forRoot(appRoutes, {useHash: true});
https://discuss.atom.io/t/angular-2-routes-breaking-on-electron-app-refresh/28370/4
It is recommended to use the HTML 5 style (PathLocationStrategy) as location strategy in Angular
因为
- 它生成干净且 SEO 友好的 URL,对用户来说更容易 去理解和记住。
- 您可以利用服务器端渲染,这将使 通过在服务器中呈现页面,我们的应用程序加载速度更快 先交付给客户。
Use Hashlocationstrtegy only if you have to support the older browsers.