Angular 離子后退按鈕只有在我在它上面滑動指針后才能工作

Question

所以基本上，我有這個簡單的代碼應該可以正常工作，但由於某種原因，我遇到了一個罕見的錯誤。

我有一個名為“home”的頁面和一個用於導航到“mysports”頁面的側邊菜單。 當它第一次加載頁面“mysports”時，它會顯示ion-back-button ，但是每當我嘗試單擊它時，它都不起作用。 當我單擊ion-back-button並將其向左滑動時，HTML 刷新並且ion-back-button工作正常。

在我的 html 我有這個代碼：

<ion-header>
  <ion-toolbar>
     <ion-buttons>
        <ion-back-button text="Back"></ion-back-button>
        <ion-label>
          <ion-title class="ion-text-center">spoRts</ion-title>
        </ion-label>
     </ion-buttons>
  </ion-toolbar>
</ion-header>
    
<ion-content>
    
</ion-content>

我沒有別的，只有這個。 甚至沒有觸及mysports.page.ts文件。

Answer 1

您可以嘗試將 "defaultHref="your_route" 放在 ion-back-button 標簽內，如下所示：

<ion-buttons slot="start">
    <ion-back-button defaultHref="contacts"></ion-back-button>
</ion-buttons>

我希望能幫助你，問候。

Answer 2

你的 header 的結構是錯誤的。 當他不正確時，他會做罕見的錯誤。 您必須將其更改為以下內容：

<ion-header>
    <ion-toolbar>
        <ion-buttons slot="start">
            <ion-back-button></ion-back-button>
        </ion-buttons>
        <ion-title>spoRts</ion-title>
    </ion-toolbar>
</ion-header>

另外，如果您想更改后退按鈕的文本，您可以在 app.module.ts 上全局執行：

        IonicModule.forRoot({
            backButtonText: 'Back',
            backButtonIcon: 'arrow-back-outline',
        }),