HashLocationStrategy не создает # местоположения при маршрутизации?

я запускаю бета-версию Angular 2.0 и я путаюсь с маршрутизацией. Вот что у меня есть

AppComponent:

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, кажется, указывают на то, что я делаю это так же, как я выше. У меня тоже есть <base href="/app/" /> в голове моего индекса.формат html. Вот мои 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 в своем bootstrap(...) вызов, URL-адреса по-прежнему "HTML5 Style":localhost:8080/app/Rows, когда он должен быть!--7-->.

Я считаю, что мне нужно использовать старый # based способ, если я хочу, чтобы мои пользователи могли пометить определенное представление и вернуться к нему. Если я позволю /app/Rows затем обновление страницы вызывает 404, потому что Rows нет в app папка.

9
angular2-routing

2 ответов

я попробовал ваш код, он работает

мой код ниже:

boot.ТС

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.ТС

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]

детали я не знаю, почему, может быть, угловой не может не обрабатывать, когда вы используете ROUTERPROVIDERS дважды, с нетерпением жду, кто-то может помочь u

17

в соответствии с Angular 2 final release вы должны включить LocationStrategy использовать HashLocationStrategy класс, поместив его внутри поставщиков main @NgModule делая {provide: LocationStrategy, useClass: HashLocationStrategy}

app.модуль.ТС

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