Angular 角2分量路由器

在Angular 2上安装一个简单的测试应用程序，我快疯了。我有3个页面/组件要用新的组件路由器加载。我已经让它半工作了。目前我有两个问题

1-如果您键入要转到的组件的路径，例如“”，而不是加载我的Test2页面，它会失败，说找不到该路由

2-尝试加载不同页面时，我第一次单击链接时，它将正确加载页面。当我单击链接时，所有其他页面都会引发异常

这是我的设置：

应用程序ts

import {Component, bootstrap, provide} from 'angular2/angular2';
import {ROUTER_PROVIDERS, ROUTER_DIRECTIVES, RouteConfig, APP_BASE_HREF} from 'angular2/router';

import {Test1} from './Test1';
import {Test2} from './Test2';
import {Test3} from './Test3';

@Component({
    selector: 'my-app',
    template: '<test1></test1><router-outlet></router-outlet>',
    directives: [ROUTER_DIRECTIVES, Test1, Test2]
})

@RouteConfig([
  {path: '/', as: 'Home', component: Test1},
  {path: '/Test2', as: 'Test2', component: Test2},
  {path: '/Test3', as: 'Test3', component: Test3}   
])

class AppComponent {
  constructor() {}
 }

bootstrap(AppComponent, [ROUTER_PROVIDERS, provide(APP_BASE_HREF, { useValue: '/' })]); 

import {Component, bootstrap} from 'angular2/angular2';
import {RouterLink} from 'angular2/router';

@Component({
    selector: 'test1',
    templateUrl: 'app/Test1.html',
    directives: [RouterLink] 
})
export class Test1 { }

import {Component, bootstrap} from 'angular2/angular2';
import {RouterLink} from 'angular2/router';

@Component({
    selector: 'test2',
    templateUrl: 'app/Test2.html',
    directives: [RouterLink]
})
export class Test2 { }

import {Component, bootstrap} from 'angular2/angular2';
import {RouterLink} from 'angular2/router';

@Component({
    selector: 'test3',
    templateUrl: 'app/Test3.html',
    directives: [RouterLink]
})
export class Test3 { } 

Test1.html

<h1> Test 1 </h1>
<a [router-link]="['/Test2']">Test Link 2</a>

<h1> Test 2 </h1>
<a [router-link]="['/Test3']">Test Link 3</a>

<h1> Test 3 </h1>
<a [router-link]="['/Test2']">Test Link 2</a>

Test2.html

<h1> Test 1 </h1>
<a [router-link]="['/Test2']">Test Link 2</a>

<h1> Test 2 </h1>
<a [router-link]="['/Test3']">Test Link 3</a>

<h1> Test 3 </h1>
<a [router-link]="['/Test2']">Test Link 2</a>

Test3.html

<h1> Test 1 </h1>
<a [router-link]="['/Test2']">Test Link 2</a>

<h1> Test 2 </h1>
<a [router-link]="['/Test3']">Test Link 3</a>

<h1> Test 3 </h1>
<a [router-link]="['/Test2']">Test Link 2</a>

测试3
，并且my App.ts的工作版本如下所示：

import {Component, bootstrap, provide} from 'angular2/angular2';
import {ROUTER_PROVIDERS, ROUTER_DIRECTIVES, RouteConfig, APP_BASE_HREF, LocationStrategy, HashLocationStrategy} from 'angular2/router';

import {Test1} from './Test1';
import {Test2} from './Test2';
import {Test3} from './Test3';

@Component({
    selector: 'my-app',
    template: ` <a [router-link]="['/Home']">Test1 Link</a>
                <a [router-link]="['/Test2', {id: 3}]">Test2 Link</a>
                <a [router-link]="['/Test3']">Test3 Link</a>
                <router-outlet></router-outlet>`,
    directives: [ROUTER_DIRECTIVES, Test1, Test2,Test3]
})

@RouteConfig([
  {path: '/',          component: Test1, as: 'Home'},
  {path: '/Test2/:id', component: Test2, as: 'Test2'},
  {path: '/Test3',     component: Test3, as: 'Test3'}

])

class AppComponent {
  constructor() { }
 }

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

import{Component，bootstrap，provide}来自'angular2/angular2'；
从“angular2/ROUTER”导入{ROUTER_提供者、ROUTER_指令、RouteConfig、APP_BASE_HREF、LocationStrategy、HashLocationStrategy}；
从“./Test1”导入{Test1}；
从“/Test2”导入{Test2}；
从“/Test3”导入{Test3}；
@组成部分({
选择器：“我的应用程序”，
模板：`Test1链接
测试2链接
测试3链接
`,
指令：[路由器指令，Test1，Test2，Test3]
})
@线路图([
{path:'/'，组件：Test1，as:'Home'}，
{path:'/Test2/:id'，组件：Test2，如：'Test2'}，
{path:'/Test3'，component:Test3，as:'Test3'}
])
类AppComponent{
构造函数（）{}
}
引导（AppComponent，[ROUTER_PROVIDERS，provide（LocationStrategy，{useClass:HashLocationStrategy}）]；
我做了类似的事情，效果很好。试试这个：

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

我认为
test3.ts@Component
应该有
templateurl:'app/test3.html'
1，因为您使用的是标准的基于html5的位置更改。在这种情况下，服务器基础设施应该进行url重定向，以便无论url命中率如何，都能加载正确的内容（根内容）。嗨，Chandemani，感谢您指出这一点！我已经编辑了test3模板Url。好吧，但我确信这一定是一种只需在地址栏上键入URL即可加载不同页面的方法。我就是不能让它发挥作用。当我点击第一个链接时，地址会显示正确的路径。但是，如果我刷新或尝试直接去那个位置，我会得到一个Cannot-get/Test2！这很有效。：）在这方面也有一些问题，工作起来很有魅力！我们可以在引导功能参数中使用
ROUTER\u指令
吗？现在不可以，但通常我们在引导应用程序时只使用提供者