不同的路線在Angular 7中使用相同的組件

Question

我將同一組件用於不同的路由，但是當我在同一組件的路由之間導航時，URL會更改，但是頁面內容是相同的。

我使用了以下解決方案：

constructor(route:ActivatedRoute) {
  route.url.subscribe(val => {
     //Code Here
  });
}

我現在有預期的行為，但是還有另一個問題：Angular不會在瀏覽器歷史記錄中保存以前的URL。

如果流程為：A-> B-> C，其中B和C是相同的組件，如果單擊瀏覽器中的后退按鈕，則導航到A而不是B。

Answer 1

發生這種情況是因為Angular默認不維護狀態。 但是，您可以通過以下方法使其：

ngOnInit(){
    window.history.pushState( {} , 'ComponentName', '/path' );
}

您可以編寫一個服務，該服務在每次導航到某個組件時都會推送新狀態。 維護狀態后，按“后退”按鈕將帶您到該組件。

我沒有對此進行測試，但是應該可以。

Answer 2

一種以某種角度解決此問題的方法是創建兩個新組件，並且每個組件中只有html只是所需組件的選擇器。 然后在路由器中，將組件定義為兩個新組件之一，Angular會將它們注冊為不同的組件並解決問題。 我以前遇到過這個問題，這是我找到的最簡單，最直接的解決方案。