angular2（2.0.0-beta.3）通過網址路由不工作

目前我正在玩angular2路由。每件事都按預期工作，但在瀏覽器中手動鍵入路由網址不起作用。angular2（2.0.0-beta.3）通過網址路由不工作

我使用

當前的代碼使用錨標記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的變化相匹配的路徑段（/用戶/或儀表板），並啓動相應的組件（或UsersComponent或DashboardComponent）並顯示其視圖。

來源

2016-02-13 Jorin

[角2.0路由器的可能的複製不工作重新加載瀏覽器]（http://stackoverflow.com/questions/31415052/angular-2-0-router-not-working-on-reloadi ng-the-browser） –

我的問題不是（Angular 2.0路由器不能在重新加載瀏覽器）它是（在定義了角度路由之後，它不是通過直接在瀏覽器中輸入來工作，雖然它使用錨標籤） – Jorin

問題是一樣的@Jorin –

這是正常的，因爲默認情況下，HTML5歷史記錄用於與Angular2進行路由。您需要一個服務器配置將所有路由重定向到HTML條目文件。

你可以看看這個答案：

Angular 2 : 404 error occur when i refresh through Browser

來源

2016-02-13 17:17:52

嗨Thierry Templier感謝您的回覆......我跟着鏈接你提供並由boot.ts修改如下 ' 從'angular2/platform/browser'導入{bootstrap}; 從「./app」導入{App}; 從「angular2/router」導入{HashLocationStrategy}; 從「angular2/router」導入{LocationStrategy}; 從「angular2/router」導入{ROUTER_PROVIDERS}; 從「angular2/core」導入{provide}; 引導程序（App，[ ROUTER_PROVIDERS，提供（LocationStrategy，{useClass：HashLocationStrategy}） ]）;' 但它並沒有幫助我 – Jorin

看到我的問題，我更新了boot.ts如上 – Jorin

最後我想出一個解決方案。解決方案是使用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);

謝謝

來源

2016-02-13 18:13:33 Jorin

angular2（2.0.0-beta.3）通過網址路由不工作

回答

相關問題