ionic 4 ion-back-button всегда возвращаются на «корневую» страницу

Question

В своем приложении я использую ion-back-view и замечаю, что кнопка «Назад» всегда возвращается на «корневую» страницу (первая загруженная страница), поэтому после исследования кода я увидел, что router.navigate всегда установленсмотреть как первый вид.

это код из stack-controller.ts

 StackController.prototype.insertView = function (enteringView, direction) {
        // no stack
        if (!this.stack) {
            this.views = [enteringView];
            return;
        }
        // stack setRoot
        if (direction === 0) {
            this.views = [enteringView];
            return;
        }
        // stack
        var index = this.views.indexOf(enteringView);
        if (index >= 0) {
            this.views = this.views.slice(0, index + 1);
        }
        else {
            if (direction === 1) {
                this.views.push(enteringView);
            }
            else {
                this.views = [enteringView];
            }
        }
    };

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

 if (direction === 0) {
            this.views = [enteringView];
            return;
        }

тогда как я могу добавить представления в стек из кода, а не HTML (routerDirection)?https://forum.ionicframework.com/t/ionic-v4-routing-and-root/135439/3

Answer 1

Для временного обходного пути вы можете использовать NavController и сделать (click) = "navCtrl.back ()" в элементе ion-back-button.

Answer 2

Есть открытая ошибка , которая описывает проблемы с ion-back button.Я думаю, это потому, что ion-back-button использует только main-IonRouterOutlet вместо проверки tabs-IonRouterOutlet .Это означает, что StackController внутри main-IonRouterOutlet знает только маршрут модуля вкладок (например, 'tabs').

См. Мой Ionic 4 Демонстрационный проект с исправлением и обходными путями для ion-back-button.

Демонстрация демонстрирует двумя способами , как перейти с «страницы с вкладками» к «глобальная страница» и обратно, без потери состояний вкладок .

Мой пользовательский компонент ion-back-button-tabs , решающий проблемуобъяснено выше непосредственно (также показано в демо ).ion-back-button-tabs использует ion-back-button для внутреннего использования, однако дополнительно проверяется, следует ли перейти на «страницу с вкладками» и, если это так, определяется последний активный маршрут вкладки.

Answer 3

После миграции одного из наших PWA с Ionic 3 на Ionic 4 я обнаружил, что маршрутизация полностью изменилась, и вам действительно нужно думать в угловом ключе вместо Ionic 3.

Каждая навигация (вперед иback) запустит жизненный цикл маршрутизатора, что означает, что если у вас есть какие-либо правила защиты и перенаправления, он будет вызван.

ПРИМЕР:

Допустим, у вас есть 3 вкладки «home», «уведомление».' и больше'.Вам нужно, чтобы пользователь видел вкладку home при загрузке приложения.notification вкладка содержит много уведомлений, и вы можете перейти к деталям, нажав на нее.Между тем, вы также хотите перейти к одной из деталей уведомления на вкладке home.

Маршруты в app.routing.ts

const routes: Routes = [
  { path: 'tabs', loadChildren: './pages/tabs/tabs.module#TabsModule' },
  {
    path: 'notification/:id',
    loadChildren: './pages/notification/notification-detail/notification-detail.module#NotificationDetailPageModule'
  },
  { path: 'login', loadChildren: './pages/login/login.module#LoginPageModule' },
  { path: '**', pathMatch: 'full', redirectTo: 'tabs/home' }
];

СОВЕТЫ: ​​

• Если вы хотите остаться на каждой оставленной вами вкладке, не добавляйте пустое правило перенаправления в tabs.routing.ts.

• Если вы хотите скрыть панель вкладок на подстранице,не добавляйте страницу в tabs маршруты.

маршруты в tabs.routing.ts

const routes: Routes = [
  {
    path: '',
    component: TabsPage,
    children: [
      { path: 'home', children: [{ path: '', component: HomePage }]},
      { path: 'notification', children: [{ path: '', loadChildren: '../notification/notification-list/notification-list.module#NotificationListPageModule' }]},
      { path: 'more', children: [{ path: '', loadChildren: '../more/more-index/more-index.module#MoreIndexPageModule' }]}
    ]
  }];