【发布时间】：2016-06-28 10:09:37
【问题描述】：
我正在关注 Angular2 文档中的简单快速入门应用程序，并且我正在使用 spring 后端来运行它。我的问题是角度路由器从 URL 中删除了主题标签，所以应该是 example.com/#/dashboard 现在是 example.com/dashboard。
我正在使用 StackOverflow 上的一堆帖子中指定的 LocationStrategy 方法。下面是我的简单示例：
File: 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 })
]
);
File: 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 { }
File: 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: true。
当我尝试打开 http://localhost:8080/#/test1 时，页面可以正常打开，但是当我单击 TestComponent 模板中的 2 个锚点之一时，主题标签会被丢弃。
如果我将path1 设置为useAsDefault: true，即使我尝试访问http://localhost:8080/#/test1，主题标签也会立即删除。
谁能告诉我我做错了什么或者这是一个错误？我只想在 URL 中取回主题标签。
【问题讨论】：
-
你的路由配置是什么样的？你如何导航到那条路线？
-
P.S.我确实尝试手动添加主题标签，但这破坏了整个应用程序，所以我猜我不打算触摸那里:)
-
它与 beta-9 中的相同实现工作正常。你有没有在你的应用中做过一些特别的事情？如果有，请告诉我们。
-
我不这么认为 - 我只是按照 [link]angular.io/docs/ts/latest/quickstart.html[/link] 的快速入门。它也对我有用，但是一旦加载页面，主题标签就会自动删除。它会为您保留在 URL 中吗？
-
没有服务器端代码和导航（意味着没有服务器交互）尝试运行你的应用程序并检查它是否有效？这意味着只需使用 angular2 和路由检查是否一切都按预期工作。
标签： url angular hashtag angular2-routing