Question

我有main.component.ts代码：
它的位置是：root/

import {Component, OnInit, OnChanges, IterableDiffers} from 'angular2/core';
import {TypeService} from './type/type.service';
import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
import {Router} from 'angular2/router';

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

@RouteConfig([
  {path:'/type', name: 'Type', component: TypeService}
])

export class AppComponent{
  constructor(private _router: Router){}
}

然后我有type.component.ts代码：
它的位置是：root/type

import {Component, OnInit} from 'angular2/core';
import {DirectoryComponent} from '../main/main.component';
import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
import {Router} from 'angular2/router';
import {AppComponent} from '../app.component';
import {Http} from 'angular2/http';

@Component({
  selector: 'type',
  directives: [ROUTER_DIRECTIVES],
  template: `<h1>hi</h1>`
})

export class TypeService{

  constructor(
    private _router: Router) {}
  }

当我单击主应用程序中的Type链接时，我需要root / type并加载类型组件。但是，如果我按重新加载它会给我一个Not Found错误。

如何制作，以便我可以直接通过网址访问组件？

Answer 1

当无法找到请求的网址时，您需要将服务器配置为提供主文件（通常为Runtime runtime = Runtime.getRuntime();）。根据您使用的服务器，它可能是index.html文件，中间件，路由配置等。在SO上有许多类似的问题，请尝试为您的具体案例找到答案...

Answer 2

我使用HashLocationStrategy来修复它。

https://angular.io/docs/ts/latest/api/router/HashLocationStrategy-class.html

在main.ts中：

jspm install

然后转到root /＃/ type它会转到我的类型组件。

Angular 2路由器直接访问URL

2 个答案: