Angular2路由如何去基目录

Question

我正在尝试 Angular2 教程，但刷新后它似乎无法理解路由。源代码可以在 https://angular.io/resources/live-examples/tutorial/ts/plnkr.html

上找到

@Component({
  selector: 'my-app',
  template: `
    <h1>{{title}}</h1>
    <a [routerLink]="['Dashboard']">Dashboard</a>
    <a [routerLink]="['Heroes']">Heroes</a>
    <router-outlet></router-outlet>
  `,
  styleUrls: ['app/app.component.css'],
  directives: [ROUTER_DIRECTIVES],
  providers: [HeroService]
})
@RouteConfig([
  {path: '/dashboard', name: 'Dashboard', component: DashboardComponent, useAsDefault: true},
  {path: '/heroes', name: 'Heroes', component: HeroesComponent},
  {path: '/detail/:id', name: 'HeroDetail', component: HeroDetailComponent}
])

它的作用是用 /dashboard 替换基础 / 但是当你刷新页面时，我希望它理解 /dashboard === /dashboard 而不是 /，因为它认为它是基本目录，所以链接显示 /dashboard/dashboard 并且 ts 加载失败，因为它们以相对方式包含。

Answer 1

您需要一个能够处理 HTML5 pushState
的服务器或者通过将 follogin 添加到您的 bootstrap()

来将位置策略从 PathLocationStrategy 更改为 HashLocationStrategy

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

另见

Angular2路由如何去基目录

Angular2 routing how to go to base directory

angular

angular2-routing