HashLocationStrategy未正常工作 [英] HashLocationStrategy not working as expected

问题描述

我目前在一个Angular2项目工作使用打字稿，我不能让HashLocationStrategy工作。我重写LocationStrategy在自举是在这里解释道： https：//开头的角.IO /文档/ TS /最新/引导/ router.html

I am currently working on an Angular2 Project using TypeScript and I can't get the HashLocationStrategy to work. I override the LocationStrategy in the bootstrapping the way it is explained here: https://angular.io/docs/ts/latest/guide/router.html

import {bootstrap}         from 'angular2/platform/browser';
import {ROUTER_PROVIDERS}  from 'angular2/router';
import {AppComponent}      from './app.component';
// Add these symbols to override the `LocationStrategy`
import {provide}           from 'angular2/core';
import {LocationStrategy,
        HashLocationStrategy} from 'angular2/router';
bootstrap(AppComponent, [
  ROUTER_PROVIDERS,
  provide(LocationStrategy,
         {useClass: HashLocationStrategy})
]);

我创建了一个plunker来证明我的问题就在这里： https：//开头plnkr。 CO /编辑/ YE5w4iky53SHRi211lqX？p = preVIEW

有其他人遇到过这个问题？我误解这还是我失去了一些东西？

Has anybody else encountered this issue? Have I misunderstood this or am I missing something?

编辑：预期的结果是，该路由使用哈希值在URL中。在应该产生这样的一个URL的例子：... /＃/ FUBAR，而不是我得到... / FUBAR

The expected result would be that the routing uses hashes in the URL. In the example that should produce an url like this: .../#/fubar, instead I get .../fubar

要看到生成的URL，你将能够运行在一个单独的窗口中plunker（蓝色全屏按钮）

To see the generated urls, you will have to run the plunker in a separate window (blue full screen button)

推荐答案

这个例子不遵循拆分为bootstrap-和APP-code文件的推荐的最佳实践，是一个有点混乱，在我眼睛。

The example doesn't follow the recommended best practices of splitting the files for bootstrap- and app-code, and is a bit confusing, in my eyes.

如果您移动HashLocation- code到app.component文件，它工作正常：

It works fine if you move the HashLocation-code into your app.component file:

app.ts

import [..]

@Component({
    [..]
    providers:[
        ROUTER_PROVIDERS,
        provide(LocationStrategy, {useClass: HashLocationStrategy})]
})
@RouteConfig([..])
    export class App{
        [..]
    }

boot.ts

import [..]
[..]
bootstrap(App);

在你plunker我的工作叉看看：结果
https://plnkr.co/edit/TNr8jQjiVmhADhWzbRsC?p=$p$pview

我只是猜测，但原因可能是，你覆盖在AppComponent的提供者的属性，如图所示的例子。

I'm just guessing, but the reason might be, that you overwrite the "providers" attribute in the AppComponent, as shown in the examples.

这篇关于HashLocationStrategy未正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！