Question

目前我正在使用angular2路由。每件事都按预期工作，但在浏览器中手动输入路径网址无法正常工作。

我正在使用的当前代码

app.ts

    import {Component} from 'angular2/core';
    import {Route,RouteConfig,ROUTER_DIRECTIVES,ROUTER_PROVIDERS} from "angular2/router";
import {DashboardComponent} from "./dashboard/dashboard.component";
import {UsersComponent} from "./user/users.component";


    @Component({
        selector:'app',
        template:`
        <h1>{{title}}</h1>
        <nav>
          <a [routerLink]="['Dashboard']">Dashboard</a>
          <a [routerLink]="['Users']">Users</a>
        </nav>
        <router-outlet></router-outlet>
        `,
        directives:[ROUTER_DIRECTIVES],
        providers:[ROUTER_PROVIDERS]
    })


    @RouteConfig([
        new Route({
            path:'/dashboard',
            component:DashboardComponent,
            name:'Dashboard',
            useAsDefault:true
        }),
        new Route({
            path:'/users',
            component:UsersComponent,
            name:'Users'

        })

    ])
    export class App{

    }

boot.ts

    import {bootstrap} from 'angular2/platform/browser';
import {App} from "./app";
import {HashLocationStrategy} from "angular2/router";
import {LocationStrategy} from "angular2/router";
import {ROUTER_PROVIDERS} from "angular2/router";
import {provide} from "angular2/core";


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

使用锚标记的路由工作非常正常但是当我在浏览器中手动输入相同的网址（ http://localhost:3000/users或http://localhost:3000/dashboard ）并点击输入时说

Cannot GET /users   

or 

Cannot GET /dashboard

请建议我如何检测浏览器的位置URL更改以匹配路径段（/ users或/ dashboard）并激活相应的Component（或UsersComponent或DashboardComponent）并显示其视图。

Answer 1

这是正常的，因为默认情况下，HTML5历史记录用于使用Angular2进行路由。您需要服务器配置将所有路由重定向到HTML条目文件。

你可以看看这个答案：

Angular 2 : 404 error occur when i refresh through Browser

Answer 2

最后，我找到了一个解决方案。解决方案是使用HashLocationStrategy，如下所示

<强> app.ts

 import {Component} from 'angular2/core';
    import {Route,RouteConfig,ROUTER_DIRECTIVES,ROUTER_PROVIDERS} from "angular2/router";
import {HashLocationStrategy} from "angular2/router";
import {LocationStrategy} from "angular2/router";
import {provide} from "angular2/core";

import {DashboardComponent} from "./dashboard/dashboard.component";
import {UsersComponent} from "./user/users.component";


    @Component({
        selector:'app',
        template:`
        <h1>{{title}}</h1>
        <nav>
          <a [routerLink]="['Dashboard']">Dashboard</a>
          <a [routerLink]="['Users']">Users</a>
        </nav>
        <router-outlet></router-outlet>
        `,
        directives:[ROUTER_DIRECTIVES],
    providers:[HeroService,ROUTER_PROVIDERS,provide(LocationStrategy, {useClass: HashLocationStrategy})]
    })


    @RouteConfig([
        new Route({
            path:'/dashboard',
            component:DashboardComponent,
            name:'Dashboard',
            useAsDefault:true
        }),
        new Route({
            path:'/users',
            component:UsersComponent,
            name:'Users'

        })

    ])
    export class App{

    }

<强> boot.ts

import {bootstrap} from 'angular2/platform/browser';
import {App} from "./app";
bootstrap(App);

谢谢

angular2（2.0.0-beta.3）路由url无法正常工作

2 个答案: