Angular2路由 - 添加使用LocationStrategy不工作的＃标签？ [英] Angular2 routing - adding the hashtag using LocationStrategy not working?
问题描述
我下面从Angular2文档简单快速启动应用程序，我使用的弹簧后端来运行它。我的问题是，角路由器从URL抛弃了包括hashtag所以什么应该是 example.com /＃/仪表板现在 example.com/仪表板。
I'm following the simple quickstart app from the Angular2 docs and I'm using a spring backend to run it. My problem is that the angular router ditched the hashtag from the URL so what should have been example.com/#/dashboard is now example.com/dashboard.
我使用一堆StackOverflow上的职位指定的 LocationStrategy 方法。下面是我简单的例子：
I am using the LocationStrategy method specified in a bunch of posts on StackOverflow. Below is my simple example:
文件：main.ts
///<reference path="../node_modules/angular2/typings/browser.d.ts"/>
import {bootstrap} from 'angular2/platform/browser'
import {provide} from 'angular2/core';
import {LocationStrategy, HashLocationStrategy} from 'angular2/router';
import {TestComponent} from './simple/test.component'
bootstrap(
TestComponent,
[
provide(LocationStrategy, { useClass: HashLocationStrategy })
]
);
文件：test.component.ts
import {Component} from 'angular2/core';
import {RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from 'angular2/router';
@Component({
selector: 'test1',
template: "<h1>This is test1 component</h1>"
})
export class Test1 { };
@Component({
selector: 'test2',
template: "<h1>This is test2 component</h1>"
})
export class Test2 { };
@Component({
selector: 'my-app',
template: `
<h1>This is my test app</h1>
<nav>
<a [routerLink]="['Test1']">Test1</a>
<a [routerLink]="['Test2']">Test2</a>
</nav>
<router-outlet></router-outlet>
`,
directives: [ROUTER_DIRECTIVES],
providers: [ROUTER_PROVIDERS]
})
@RouteConfig([
{
path: '/test1',
name: 'Test1',
component: Test1
},
{
path: '/test2',
name: 'Test2',
component: Test2
}
])
export class TestComponent { }
文件：index.html的
<html>
<head>
<base href="/">
<title>This is an Angular 2 test</title>
<!-- Angular dependencies -->
<script src="/node_modules/es6-shim/es6-shim.js"></script>
<script src="/node_modules/systemjs/dist/system-polyfills.js"></script>
<script src="/node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="/node_modules/systemjs/dist/system.src.js"></script>
<script src="/node_modules/rxjs/bundles/Rx.js"></script>
<script src="/node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="/node_modules/angular2/bundles/router.dev.js"></script>
<!-- App -->
<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}/*,
'node_modules': {
format: 'cjs',
defaultExtension: 'js'
}*/
}
});
System.import('app/main').then(null, console.error.bind(console));
</script>
</head>
<body>
<my-app></my-app>
</body>
</html>
我用 Angular2 2.0.0-beta.9 ，这是我看到的行为。请注意，没有在@RouteConfig 2路径都标有 useAsDefault：真正的
I'm using Angular2 2.0.0-beta.9 and this is the behavior that I see. Note that none of the 2 paths in the @RouteConfig are marked with useAsDefault: true.
当我尝试打开的http：//本地主机：8080 /＃/ test1的页面打开很好，但是当我点击了2个其中一个锚点TestComponent模板，包括hashtag被丢弃。
When I try to open up http://localhost:8080/#/test1 the page opens fine, but when I click on one of the 2 anchors in the TestComponent template, the hashtag gets dropped.
那么，如果我设置路径1 是 useAsDefault：真正的，这个标签被立即下降，甚至当我尝试访问的http：//本地主机：8080 /＃/ test1的
Then if I set path1 to be useAsDefault: true, the hashtag gets dropped immediately even when I try to visit http://localhost:8080/#/test1.
能否有人告诉我，如果我做错了什么，或者如果这是一个错误？我只是想获得包括hashtag回到网址。
Can someone please tell me if I'm doing something wrong or if that's a bug? I just want to get the hashtag back in the URL.
推荐答案
的 ROUTER_PROVIDERS 需要在 LocationStrategy 否则你的previously加入 LocationStrategy 被覆盖。
The ROUTER_PROVIDERS need to be added before LocationStrategy otherwise your previously added LocationStrategy gets overridden.
bootstrap(
TestComponent,
[
ROUTER_PROVIDERS,
// must be listed after `ROUTER_PROVIDERS`
provide(LocationStrategy, { useClass: HashLocationStrategy })
]
);
删除这一行
providers: [ROUTER_PROVIDERS]
从 TestComponent
这篇关于Angular2路由 - 添加使用LocationStrategy不工作的＃标签？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
