Проблема навигации Ionic 4 ion-tabs: При нажатии кнопки «Назад» переход на предыдущую вкладку вместо предыдущей страницы

#angular #ionic-framework #ionic4

#angular #ionic-framework #ionic4

Вопрос:

У меня есть два приложения: одно для поставщика услуг, другое для обычного пользователя (что-то вроде приложения grab amp; grab driver). Оба довольно похожи (за исключением некоторых страниц, эксклюзивных только для поставщика услуг), и одна из функций — обмен сообщениями и запросами. Реализация обмена сообщениями для обоих приложений довольно схожа.

У меня есть страница messenger, на которой есть две вкладки: чаты и запрос. Здесь возникает проблема, когда я перемещаюсь по вкладкам в пользовательском приложении, мне кажется, что оно добавляет страницы в стек. Поток выглядит следующим образом:

  1. Я открываю приложение, отображается домашняя страница
  2. Я открываю страницу мессенджера, отображается вкладка чата
  3. Я нажимаю на вкладку запроса, отображается вкладка запроса
  4. Я нажимаю кнопку «Назад», и она возвращается на вкладку «Чат» (вместо этого должна вернуться на домашнюю страницу)

Однако это отлично работает в приложении поставщика услуг, когда реализация в обоих приложениях одинакова. Применяясь к той же ситуации, что и выше, это работает таким образом в приложении поставщика услуг (так, как я хочу, чтобы это работало):

  1. Я открываю приложение, отображается домашняя страница
  2. Я открываю страницу мессенджера, отображается вкладка чата
  3. Я нажимаю на вкладку запроса, отображается вкладка запроса
  4. Я нажимаю кнопку «Назад», и она возвращается на домашнюю страницу

Ниже приведены коды, поскольку оба приложения используют один и тот же код, я вставлю их один раз:

messenger.ts:

 <ion-tabs>
    <ion-tab-bar slot="top">

      <ion-tab-button tab="chats">
        <ion-label><strong>Chat</strong></ion-label>
      </ion-tab-button>

      <ion-tab-button tab="inquiries">
        <ion-label><strong>Inquiries</strong></ion-label>
      </ion-tab-button>

    </ion-tab-bar>
</ion-tabs>
  

mesenger.module.ts:

 import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';

import { IonicModule } from '@ionic/angular';

import { MessengerPage } from './messenger.page';

const routes: Routes = [
  {
    path: 'tabs',
    component: HealthMessengerPage,
    children: [
      {
        path: 'chats',
        loadChildren: '../chats/chats.module#ChatsPageModule'
      },
      {
        path: 'inquiries',
        loadChildren: '../inquiries/inquiries.module#InquiriesPageModule'
      },
    ]
  },
  {
    path: '',
    redirectTo: 'tabs/chats',
    pathMatch: 'full'
  }
];

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild(routes)
  ],
  declarations: [MessengerPage]
})
export class MessengerPageModule {}
  

Я не уверен, где я сделал неправильно. Кто-нибудь может помочь?

Обновить

Кажется, я не могу выяснить, что вызвало это, поэтому я скопировал все в новый файл проекта, и теперь он работает нормально.

Комментарии:

1. Не уверен, но это может быть связано с этой ошибкой github.com/ionic-team/ionic/issues/15216

2. вы указали messenger.html вместо messenger.ts ?

3. @IanP. это ts-файлы. они отлично работают в другом приложении, хотя код точно такой же

4. Я думаю, @CyrilHanquez прав, это может быть ошибка.

5. В итоге я скопировал все приложение в новый проект ionic, и оно работает нормально.

Ответ №1:

изменить ion-кнопка «Назад»

 <ion-back-button [routerLink]="'/home'" defaultHref="home"></ion-back-button>
  

Комментарии:

1. Пробовал, но не сработало. Ранее на страницах не было кнопок «Назад», но это работает так, как я хотел в одном из приложений.