Question

我正在运行Angular 2 beta.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参考似乎都指向我，就像我上面那样。我在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导航栏中单击其中一个条目时，我看到视图已经关闭并显示正确的模板，并且它们的组件已经运行并且被绑定到。不过，尽管在HashLocationStrategy来电中使用了bootstrap(...)，但网址仍然是“HTML5风格”：localhost:8080/app/Rows应该是localhost:8080/app/#/Rows。

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

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]

详细信息我不知道为什么，当你使用ROUTERPROVIDERS两次时，可能无法处理角度，期待有人可以帮助你

Answer 2

根据Angular 2最终版本，您必须包含LocationStrategy以使用HashLocationStrategy类，将其放在main @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不会产生＃位置？

2 个答案: