需求1：如果開發人員想禁用整個應用程式或多個元件的後退按鈕
需求2：如果只想禁用特定元件的後退按鈕

對於第一個要求，一個可行的辦法是，實現一個 Guard 並將其應用於所需的路由。

示例程式碼：

```typescript
import { LocationStrategy } from '@angular/common';

@Component({
  selector: 'app-root'
})
export class AppComponent {
  constructor(
    private location: LocationStrategy
  ) {
    history.pushState(null, null, window.location.href);
    // check if back or forward button is pressed.
    this.location.onPopState(() => {
        history.pushState(null, null, window.location.href);
        this.stepper.previous();
    });
  }
}
```
Spartacus 專案裡 RoutingService 的 back 方法實現。Visual Studio Code 的 peek reference 功能顯示，沒有其他程式碼呼叫了這個 back 方法。

![](https://img-blog.csdnimg.cn/img_convert/eb3f59a1f29e770c81132ddb4aa9ffe7.png)

![](https://img-blog.csdnimg.cn/img_convert/e06f4ffc539c885438d92438b319deda.png)

Angular 中的 CanDeactivate Guard 可用於避免導航到`與應用程式相同域的另一個頁面`。

當我們在瀏覽器位址列輸入一個新的 URL 地址時，我們得到一個新頁面，這個 URL 儲存在瀏覽器歷史記錄中。 使用這個歷史記錄，我們可以回退到以前瀏覽過的頁面。

像 Angular 這樣的 SPA 應用程式呢？ 大多數情況下，在 Angular 中我們有一個靜態路由，但我們會更改當前頁面上的內部元件。

標準瀏覽器歷史記錄對 Angular 這種單頁面應用不起作用。我們可以編寫自己的服務，當使用者在我們的 Angular 應用程式中更改路由時監聽。新 Route 將被儲存，當使用者點選後退按鈕時，我們給出最後儲存的路由記錄。

在我們儲存路線歷史的導航服務中，我們訂閱了 Route 更改事件。 我們將每條新路線儲存在一個陣列中。 顯然，這個服務包含了一個獲取之前路由並返回的方法。

![](https://img-blog.csdnimg.cn/img_convert/8ad343c49442ecffa59916bb6998e90c.png)

Spartacus 針對這個 navigationEnd 事件並沒有特殊的處理：
![](https://img-blog.csdnimg.cn/img_convert/3fbc5d187efca41a678a5b5c96b4e8f0.png)

看個具體的例子。

UserListComponent 應該包含所有使用者的列表，而 ActiveUsersComponent 只包含部分使用者。 這兩個元件都將連結到 UserDetailComponent，然後我們希望從該元件導航回來。

```typescript
const routes: Routes = [
  {
    path: 'users',
    component: UsersComponent,
    children: [
      { path: '', component: UserListComponent },
      { path: 'active', component: ActiveUsersComponent },
      { path: ':id', component: UserDetailComponent },
    ],
  },
  { path: '**', redirectTo: 'users' },
]
```
## 靜態路由

一種解決方案是在詳細資訊元件中定義路由器連結，並使用絕對路由顯式導航回父級：

```html
<a routerlink="/users" rel="nofollow">Back with Absolute Routing</a>
```
或者，也可以從元件類以程式設計方式執行此操作，但請記住，router links 比透過點選事件觸發的導航從語義上來說更清晰。

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

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

back(): void {
    this.router.navigate('/users')
  }
}
```

關於 Angular 應用對瀏覽器 Back 按鈕支援問題的討論

相關文章