已解決430363個問題，去搜搜看，總會有你想問的

如何在 Angular 9 中實現后退按鈕

首頁猿問如何在 Angular 9...

如何在 Angular 9 中實現后退按鈕

慕桂英4014372 2023-08-21 15:06:37

我正在實現一個只有兩個用戶界面的小項目。1-第一個 UI 稱為“主頁”，其中包含分頁的用戶列表the home component。2-第二個 UI 稱為用戶詳細信息，其中包含用戶個人資料the user-details component3-當然還有包含工具欄的應用程序組件和router-outlet讓我們假設以下場景我在home用戶界面和分頁用戶列表的第二頁中，單擊其中一個用戶項目，然后user-details出現用戶界面，我現在位于第二個用戶界面，現在我想導航回主頁，但是這樣做時，homeUI 將被重新創建，并成為用戶列表的第一頁，而不是我們留下的第二頁，因為這是我的后退按鈕代碼<img routerLink = "/home" style="cursor: pointer;" width="40" alt="Angular Logo" /> <span routerLink = "/home" style="cursor: pointer;">Users</span>我的問題是：有沒有什么方法可以實現它，使其不會重新創建主頁并i.e.實現后退按鈕的正確行為？

查看完整描述

1 回答

梵蒂岡之花

TA貢獻1900條經驗獲得超5個贊

有幾種方法可以解決這個問題。

如果您使用分頁庫（例如 ngx-pagination），那么希望分頁組件接受當前頁面的輸入。然后，您需要通過服務或持久存儲來跟蹤該頁面。每當您返回主 UI 時，獲取您所在的頁面并將其加載回分頁組件。

另一種方法是使用路由器參數。通過稍微修改您的網址，它們可以采用以下形式：

/home/1
/home/2
/home/3

點擊第2頁中的用戶可以給出url：（/home/2/user-id只是一個例子）

您的主頁組件的路徑可能如下所示：

const routes: Routes = [

{ path: "home/:pageNumber", component: HomeComponent }

];

加載 home 組件后，您可以獲取 router 參數，如下所示（我使用的是 Router 方法，但您也可以手動解析 URL）：

export class HomeComponent implements OnInit {

constructor(private router: Router) {

const pageNumber = this.router.navigationExtras.params['pageNumber'];

}

然后，您可以將此頁碼加載到分頁組件中。使用此方法不需要您跟蹤以前的頁面。

可能有更好的方法可以做到這一點，但這只是一些建議:)

反對回復 2023-08-21

1 回答
0 關注
172 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

如何在 Angular 9 中實現后退按鈕

如何在 Angular 9 中實現后退按鈕

1 回答

添加回答