Question

我目前正在使用TypeScript处理Angular2项目，但我无法使HashLocationStrategy正常工作。我在引导中覆盖了LocationStrategy，方法如下所述：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/edit/YE5w4iky53SHRi211lqX?p=preview

还有其他人遇到过此问题吗？我误解了这个或者我错过了什么吗？

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

要查看生成的网址，您必须在单独的窗口中运行plunker（蓝色全屏按钮）

Answer 1

该示例不遵循为引导程序和应用程序代码拆分文件的建议最佳做法，在我看来有点令人困惑。

如果将HashLocation代码移动到app.component文件中，它可以正常工作：

<强> app.ts

import [..]

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

<强> boot.ts

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

看看我的工作叉子： https://plnkr.co/edit/TNr8jQjiVmhADhWzbRsC?p=preview

我只是在猜测，但原因可能是，你在AppComponent中覆盖了“providers”属性，如示例所示。

Answer 2

问题和答案基于角度2的beta版本。以下是一个工作示例Angular 2.3：来自官方文档https://angular.io/docs/ts/latest/guide/router.html#!#browser-url-styles

import { NgModule }             from '@angular/core';
import { BrowserModule }        from '@angular/platform-browser';
import { FormsModule }          from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';

import { AppComponent }          from './app.component';
import { PageNotFoundComponent } from './not-found.component';

const routes: Routes = [

];

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    RouterModule.forRoot(routes, { useHash: true })  // .../#/crisis-center/
  ],
  declarations: [
    AppComponent,
    PageNotFoundComponent
  ],
  providers: [

  ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

HashLocationStrategy未按预期工作

2 个答案: