HashLocationStrategy 在路由时不产生#locations？

Question

我正在运行安装 Angular 2 beta.0，我正在处理路由问题。这是我的

应用程序组件：

import {Component, provide} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';
import {FORM_DIRECTIVES, CORE_DIRECTIVES} from 'angular2/common';
import {Http, Response, HTTP_PROVIDERS} from 'angular2/http';
import {RouteConfig, Location, LocationStrategy, HashLocationStrategy, ROUTER_DIRECTIVES, ROUTER_PROVIDERS} from 'angular2/router';

import {HomeComponent} from './components/home';
import {RowsComponent} from './components/rows';
import {ColumnsComponent} from './components/columns';
import {TableComponent} from './components/table';

@Component({
  selector: 'app',
  directives: [FORM_DIRECTIVES, CORE_DIRECTIVES, ROUTER_DIRECTIVES],
  templateUrl: '/app/views/root.html',
  providers: [ROUTER_PROVIDERS]
})
@RouteConfig([
  {path:'/',       name: 'Home',     component: HomeComponent},
  {path:'Rows',    name: 'Rows',     component: RowsComponent},
  {path:'Columns', name: 'Columns',  component: ColumnsComponent},
  {path:'Table',   name: 'Table',    component: TableComponent}
])
class AppComponent {
  public title = 'Responsive Layout';
  public SelectedTab = 'Home';

  constructor(location: Location) {
    //location.go('Rows');
  }
}

bootstrap(AppComponent, [
  ROUTER_PROVIDERS,
  provide(LocationStrategy, {useClass: HashLocationStrategy})
]);

每个教程和 API 参考资料似乎都指向我像上面那样做。我的 index.html 的头部也有 <base href="/app/" />。这是我的 RouterLinks

  <ul class="nav navbar-nav">
    <li [class.active]="SelectedTab=='Home'"><a [routerLink]="['Home']" (click)="SelectedTab='Home'">Home</a></li>
    <li [class.active]="SelectedTab=='Rows'"><a [routerLink]="['Rows']" (click)="SelectedTab='Rows'">Rows</a></li>
    <li [class.active]="SelectedTab=='Columns'"><a [routerLink]="['Columns']" (click)="SelectedTab='Columns'">Columns</a></li>
    <li [class.active]="SelectedTab=='Table'"><a [routerLink]="['Table']" (click)="SelectedTab='Table'">Table</a></li>
  </ul>

路由运行正常。我没有错误。当我单击 bootstrap 导航栏中的这些条目之一时，我看到视图已切换并显示正确的模板，并且它们的组件具有运行并被绑定到。然而，尽管在我的 bootstrap(...) 调用中使用了 HashLocationStrategy，URL 仍然是 "HTML5 Style": localhost:8080/app/Rows 而应该是 localhost:8080/app/#/Rows.

如果我希望我的用户能够为特定视图添加书签并返回到它，我认为我需要使用旧的基于 # 的方法。如果我允许 /app/Rows，那么刷新页面会导致 404，因为 app 文件夹中不存在 Rows。

Answer 1

我试过你的代码，它有效

我的代码如下：

boot.ts

import {bootstrap}    from 'angular2/platform/browser'
import {provide} from 'angular2/core';
import {AppComponent} from './app.component'
import {ROUTER_PROVIDERS, LocationStrategy, 
        HashLocationStrategy,
        PathLocationStrategy,
        APP_BASE_HREF, } from 'angular2/router'


bootstrap(AppComponent,[
     ROUTER_PROVIDERS,
     provide(APP_BASE_HREF, { useValue: '/' }),
     provide(LocationStrategy, {useClass : HashLocationStrategy})
]);

-

app.ts

import {Component} from 'angular2/core';
import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';

@Component({
  selector:'second',
  template: `<h1>second</h1>`
})

export class SecondComponent{}

@Component({
   selector: 'home',
   template: `<h1>hello</h1>`
})

export class HomeComponent{}

@Component({
   directives : [ROUTER_DIRECTIVES],
   selector: 'my-app',
   template: 
    `<a [routerLink]="['Home']">home</a>
     <a [routerLink]="['Second']">Second</a>
     <router-outlet></router-outlet>
    `
})


 @RouteConfig([
   {path :'/' ,name: 'Home', component: HomeComponent},
   {path :'/second', name : 'Second', component : SecondComponent}

  ])

 export class AppComponent { }

我发现你的问题，删掉这一行

providers : [ROUTER_PROVIDERS]

细节我不知道为什么，可能angular在你两次使用ROUTERPROVIDERS时无法处理，期待有人能帮助你

Answer 2

根据 Angular 2 最终版本，您必须包含 LocationStrategy 才能使用 HashLocationStrategy class，方法是将其放入主 @NgModule 的提供程序中通过 {provide: LocationStrategy, useClass: HashLocationStrategy}

app.module.ts

import {Component, NgModule} from '@angular/core';
import {
  LocationStrategy,
  HashLocationStrategy
} from '@angular/common';
@NgModule({
   imports: [...], //put module to import here
   declarations: [...], //put all component, pipe & directive
   exports: [...], //module to export
   //providers should reside here
   providers: [{provide: LocationStrategy, useClass: HashLocationStrategy}]
})
class AppModule {}

HashLocationStrategy 在路由时不产生#locations？

HashLocationStrategy does not produce # locations when routing?

angular2-routing