gpt4 book ai didi

url - Angular2 路由 - 使用 LocationStrategy 添加主题标签不起作用?

转载 作者:太空狗 更新时间:2023-10-29 17:47:04 26 4
gpt4 key购买 nike

我正在关注 Angular2 文档中的简单快速启动应用程序,并使用 spring 后端来运行它。我的问题是 Angular 路由器从 URL 中删除了主题标签,所以应该是 example.com/#/dashboard 现在是 example.com/dashboard

我正在使用 StackOverflow 上的一堆帖子中指定的 LocationStrategy 方法。下面是我的简单示例:

文件: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: true

当我尝试打开 http://localhost:8080/#/test1 时,页面打开正常,但是当我单击 TestComponent 模板中的 2 个 anchor 之一时,主题标签得到掉线了。

然后,如果我将 path1 设置为 useAsDefault: true,即使我尝试访问 http://localhost:8080/,主题标签也会立即删除#/test1.

有人可以告诉我我做错了什么或者这是一个错误吗?我只想在 URL 中取回主题标签。

最佳答案

Angular2 <= RC.5

ROUTER_PROVIDERS 需要在 LocationStrategy 之前添加,否则您之前添加的 LocationStrategy 会被覆盖。

bootstrap(
TestComponent,
[
ROUTER_PROVIDERS,
// must be listed after `ROUTER_PROVIDERS`
provide(LocationStrategy, { useClass: HashLocationStrategy })
]
);

删除这一行

providers: [ROUTER_PROVIDERS]

来自 TestComponent

关于url - Angular2 路由 - 使用 LocationStrategy 添加主题标签不起作用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35969445/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com