我們使用下面的程式碼，將 Router 注入到應用程式 Component 的建構函式裡，然後再呼叫其 `navigate` 方法，這種思路只能實現 SPA 應用間的靜態路由跳轉。

```typescript
import { Router } from '@angular/router'

@Component({...})
export class UserDetailComponent {
  constructor(private router: Router) {}

back(): void {
    this.router.navigate('/users')
  }
}
```
我們可以使用相對路由的思路。

兩個點號 `..` 代表相對路由：

```typescript
back(): void {
    this.router.navigate("..");
}
```

但是，這僅在列表元件註冊為具有空路徑的子元件時才有效，就像在下面的路由配置中所做的那樣。

```typescript
const routes: Routes = [
  {
    path: 'users',
    component: UsersComponent,
    children: [
      { path: '', component: UserListComponent },
      { path: 'active', component: ActiveUsersComponent },
      { path: ':id', component: UserDetailComponent },
    ],
  },
  { path: '**', redirectTo: 'users' },
]
```
否則，您必須將點附加到定位的子路由（例如 ../list）。 實際上，這種方法只是在路由層次結構中向上導航一層。

絕對路徑和相對路徑都不一定會返回到使用者之前去過的地方。 它們提供靜態導航，並且在開發過程中已經很清楚相應的導航將在何處結束。 因此，即使這是使用者在導航到詳細資訊檢視之前所在的位置，也不容易返回到 `/users/active`. 我們需要找到另一種解決方案來促進這種行為。

瀏覽器的後退按鈕基於瀏覽器歷史記錄(`browser history`)。它有一個 JavaScript API，我們可以使用它在我們的 Angular 應用程式中動態地來回導航。 事實上，Angular 甚至提供 Location 服務作為平臺抽象。

該服務有一個 back() 方法，它完全符合我們的要求：它在瀏覽器的歷史記錄中向後導航一步。 我們可以將服務注入細節元件或任何中間元件，並在單擊按鈕時呼叫它：

```typescript
import { Location } from '@angular/common'

@Component({...})
export class UserDetailComponent {
  constructor(private location: Location) {}

back(): void {
    this.location.back()
  }
}
```
需要注意的是，有一種極端情況：如果應用程式是在開啟瀏覽器或新選項卡後在詳細資訊路由器上啟動的，那麼歷史記錄中將沒有可返回的條目。

在這種情況下，location.back() 會將使用者從 Angular 應用程式中丟擲。 也沒有用於直接檢查瀏覽器歷史記錄的 API，因為這可能會帶來安全問題，但我們仍然有辦法解決這個問題。

我們將建立一個用於包裝後退導航的服務。 在那裡，我們還將監聽 NavigationEnd 型別的路由器事件，以管理特定於應用程式的導航歷史記錄。 現在，如果在從堆疊中彈出當前 URL 後歷史仍然包含條目，我們可以安全地導航回來。 否則我們將回退到應用程式根目錄：

```typescript
import { Injectable } from '@angular/core'
import { Location } from '@angular/common'
import { Router, NavigationEnd } from '@angular/router'

@Injectable({ providedIn: 'root' })
export class NavigationService {
  private history: string[] = []

constructor(private router: Router, private location: Location) {
    this.router.events.subscribe((event) => {
      if (event instanceof NavigationEnd) {
        this.history.push(event.urlAfterRedirects)
      }
    })
  }

back(): void {
    this.history.pop()
    if (this.history.length > 0) {
      this.location.back()
    } else {
      this.router.navigateByUrl('/')
    }
  }
}
```
本文完整的原始碼已經託管到了 StackBlitz 上，連結[如下](https://nils-mehlhorn.de/posts/angular-navigate-back-previous-page)。

Angular 應用如何回退到之前曾經瀏覽過的頁面

相關文章