Angular2路由 - 使用LocationStrategy添加hashtag不起作用？

我正在關注Angular2文檔中的簡單快速入門應用程序，並且我使用了Spring後端來運行它。我的問題是角度路由器從URL中刪除hashtag，所以應該是example.com/#/dashboard現在是example.com/dashboard。Angular2路由 - 使用LocationStrategy添加hashtag不起作用？

我正在使用StackOverflow上一堆帖子中指定的LocationStrategy方法。下面是我簡單的例子：

File: main.ts

///<reference path="../node_modules/angular2/typings/browser.d.ts"/> 

import {bootstrap} from 'angular2/platform/browser' 
import {provide} from 'angular2/core'; 
import {LocationStrategy, HashLocationStrategy} from 'angular2/router'; 

import {TestComponent} from './simple/test.component' 

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

File: test.component.ts

import {Component} from 'angular2/core'; 
import {RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from 'angular2/router'; 

@Component({ 
    selector: 'test1', 
    template: "<h1>This is test1 component</h1>" 
}) 
export class Test1 { }; 

@Component({ 
    selector: 'test2', 
    template: "<h1>This is test2 component</h1>" 
}) 
export class Test2 { }; 

@Component({ 
    selector: 'my-app', 

    template: ` 
     <h1>This is my test app</h1> 
     <nav> 
      <a [routerLink]="['Test1']">Test1</a> 
      <a [routerLink]="['Test2']">Test2</a> 
     </nav> 
     <router-outlet></router-outlet> 
    `, 

    directives: [ROUTER_DIRECTIVES], 

    providers: [ROUTER_PROVIDERS] 
}) 
@RouteConfig([ 
    { 
     path: '/test1', 
     name: 'Test1', 
     component: Test1 
    }, 
    { 
     path: '/test2', 
     name: 'Test2', 
     component: Test2 
    } 
]) 
export class TestComponent { }

File: index.html

<html> 
    <head> 

     <base href="/"> 

     <title>This is an Angular 2 test</title> 

     <!-- Angular dependencies --> 
     <script src="/node_modules/es6-shim/es6-shim.js"></script> 
     <script src="/node_modules/systemjs/dist/system-polyfills.js"></script> 
     <script src="/node_modules/angular2/bundles/angular2-polyfills.js"></script> 
     <script src="/node_modules/systemjs/dist/system.src.js"></script> 
     <script src="/node_modules/rxjs/bundles/Rx.js"></script> 
     <script src="/node_modules/angular2/bundles/angular2.dev.js"></script> 
     <script src="/node_modules/angular2/bundles/router.dev.js"></script> 

     <!-- App --> 
     <script> 

      System.config({ 
       packages: { 
        app: { 
         format: 'register', 
         defaultExtension: 'js' 
        }/*, 
        'node_modules': { 
         format: 'cjs', 
         defaultExtension: 'js' 
        }*/ 
       } 
      }); 

      System.import('app/main').then(null, console.error.bind(console)); 

     </script> 

    </head> 
    <body> 
     <my-app></my-app> 
    </body> 
</html>

我使用Angular2 2.0.0-beta.9這是我看到的行爲。請注意，@RouteConfig中的2個路徑都沒有標記爲useAsDefault: true。

當我嘗試打開http://localhost:8080/#/test1頁面打開正常，但是當我點擊TestComponent模板中的2個錨點之一時，hashtag被刪除。

然後，如果我將path1設置爲useAsDefault: true，即使我嘗試訪問http://localhost:8080/#/test1，也會立即丟棄哈希標籤。

有人可以告訴我，如果我做錯了什麼或如果這是一個錯誤？我只想將網址中的標籤重新加入。

來源

2016-03-13 RVP

什麼是您的路由配置是什麼樣子？你如何導航到該路線？ –

P.S.我曾嘗試手動添加hashtag，但打破了整個應用程序，所以我猜我不打算在那裏觸及:) – RVP

它在beta-9中的相同實現正常工作。你有沒有在你的應用中做過一些特別的事情？如果是，請告訴我們。 – micronyks

Angular2 < = RC.5

的ROUTER_PROVIDERS需要LocationStrategy前加入，否則你以前添加LocationStrategy被覆蓋。

bootstrap(
    TestComponent, 
    [ 
     ROUTER_PROVIDERS, 
     // must be listed after `ROUTER_PROVIDERS` 
     provide(LocationStrategy, { useClass: HashLocationStrategy }) 
    ] 
);

刪除這一行

providers: [ROUTER_PROVIDERS]

從TestComponent

來源

2016-03-13 16:50:08

謝謝！這讓我瘋狂 - 現在你指出了我看到的情況。經過測試，現在一切正常。再次感謝！ – RVP

很高興聽到！這是人們在使用Angular DI時遇到的常見問題之一。 –

謝謝你的迴應，我的應用程序遇到了問題，因爲我在組件和引導類中添加了路由器提供程序，因爲我從它的組件中刪除了它！ – mboullouz

隨着您的實施，一切似乎都很完美。
現在，請嘗試刪除browser's cache memory並嘗試。我希望它會開始工作！
我在嘗試解決問題時遇到了此問題。

來源

2016-03-13 11:40:24 micronyks

這不起作用 - 謝謝你看着它。我總是做硬刷新（ctr + f5），我也嘗試了隱身模式，然後清除了現金，最後我嘗試了其他沒有使用過webapp的瀏覽器（因此沒有緩存），仍然是同樣的東西。當我打開http：// localhost：8080 /＃/儀表板時，頁面會加載並立即變爲http：// localhost：8080/dashboard。我會繼續挖掘，直到我弄明白爲止，一旦弄明白，我就會用解決方案發布。再次感謝。 – RVP

好的沒問題。我面對它，所以把它放在這裏作爲答案，思想可能會幫助你或其他人......不要緊！我認爲有些東西會覆蓋你的配置或者某些東西，但很難在沒有檢查你的代碼的情況下告訴你。我希望很快你能夠自己解決它。 – micronyks

Angular2路由 - 使用LocationStrategy添加hashtag不起作用？

回答

相關問題