HashLocationStrategy 在路由时不产生 # 个位置? [英] HashLocationStrategy does not produce # locations when routing?

问题描述

我正在运行 Angular 2 beta.0，但我在处理路由问题.这是我所拥有的

I'm running the Angular 2 beta.0 and I'm messing around with routing. Here's what I have

应用组件:

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

Every tutorial and API reference seems to point to me doing it just like I have above. I also have <base href="/app/" /> in the head of my index.html. Here are my 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(...) 调用中使用了 HashLocationStrategy，但 URL 仍然是HTML5 样式":localhost:8080/app/Rows 当它应该是 localhost:8080/app/#/Rows.

The routing behaves like it should. I get no errors. When I click on one of these entries in the bootstrap nav-bar I see that the views have switched out and are showing the proper templates and that their Components have run and are being bound to. However, despite using HashLocationStrategy in my bootstrap(...) call, the URLs are still "HTML5 Style": localhost:8080/app/Rows when it should be localhost:8080/app/#/Rows.

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

I believe I need to use the old # based way if I want my users to be able to bookmark a particular view and come back to it. If I allow for /app/Rows then refreshing the page causes a 404 because Rows doesn't exist in the app folder.

推荐答案

我试过你的代码，它有效

I tried your code, it works

我的代码如下:

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 { }

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

I find your problem, delete this line

providers : [ROUTER_PROVIDERS]

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

the details I don't know why, maybe angular can't not process when you are using ROUTERPROVIDERS twice, looking forward someone can help u

这篇关于HashLocationStrategy 在路由时不产生 # 个位置?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！