在Angular2中不能可靠地觸發路徑參數訂閱

我正在開發一個基於Angular2的測驗，其中包含一些「靜態」組件（家庭，常見問題等）和一個代表測驗卡的組件。我的設置使用的路線只有這樣的佔位符：在Angular2中不能可靠地觸發路徑參數訂閱

{ 
    path: 'quiz/:questionPage', 
    component: QuizComponent 
},

這裏questionPage應該是數字...

並切換競猜卡我改變位置，並顯示新卡：

import { Location } from '@angular/common'; 
import { ActivatedRoute } from '@angular/router' 
... 
constructor (
     private route: ActivatedRoute, 
     private location: Location) {...} 
... 
showQuestion(next) { 
    this.location.go ('quiz/' + next); 
    this.showQuestion (next); 
}

要實現瀏覽器在QuizComponent後退/前進（除了在競猜卡的下一個/上）我想我可能只是剛剛訂閱路由的參數在QuizComponent的構造：

this.route.params.subscribe(params => { 
    console.log ("found params: ", params); 
});

這一直工作就像一個魅力：點擊下一個/上更新了卡與瀏覽器的前進/後退，我熬過卡的歷史。所有的完美，但我想，但我發現，至少有一個使用的情況下不工作：

如果我回去（不管多久），然後單擊新的東西後退按鈕也只更新位置（地址欄中的網址），但上述訂閱未被解僱（因此卡片不會更新）。如果我再次點擊一次，它會再次正常工作，但我後退兩步！？我可以再次前進訪問歷史上正確的條目，但這當然令人討厭...

所以..我做錯了什麼？也許這也是一個超級愚蠢的方法來實現瀏覽器後退/前進？

來源

2017-08-12 binfalse

通常我會使用路由器來導航而不是位置，不確定它是否會在這種情況下有所作爲。 –

其實，在閱讀Location的文檔後，我認爲這確實是問題所在。這是一項與瀏覽器網址互動的服務，您應該使用Router在您的應用內導航。

由於文件還指出：

使用位置只有當你需要進行交互或創建路由之外標準化網址。

因此，如果您瀏覽的東西，如：

this.router.navigate(['quiz', next]);

它應該工作正常。

來源

2017-08-13 09:02:31

完美！非常感謝，真的！ :) – binfalse

在Angular2中不能可靠地觸發路徑參數訂閱

回答

相關問題