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

Question

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

我正在使用 Whosebug 上一堆帖子中指定的 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 条路径中的 none 标记为 useAsDefault: true.

当我尝试打开时 http://localhost:8080/#/test1 页面打开正常，但是当我单击 TestComponent 模板中的 2 个锚点之一时，主题标签被丢弃。

然后，如果我将 path1 设置为 useAsDefault: true，即使我尝试访问 http://localhost:8080/#/test1.

，主题标签也会立即消失

有人可以告诉我我做错了什么或者这是一个错误吗？我只想在 URL.

中取回主题标签

Answer 1

通过您的实施，一切看起来都很完美。
现在，请尝试删除 browser's cache memory 并尝试。我希望它会开始工作!!!
我在尝试解决您的问题时遇到了这个问题。

Answer 2

Angular2 <= RC.5

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

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

删除这一行

providers: [ROUTER_PROVIDERS]

来自 TestComponent

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

Angular2 routing - adding the hashtag using LocationStrategy not working?

url

hashtag

angular2-routing

angular