Как заставить активный ioni c ion-tab перезагрузить его базовый маршрут - PullRequest
Новая
       90

Как заставить активный ioni c ion-tab перезагрузить его базовый маршрут

0 голосов
/ 19 июня 2020

Я пытаюсь сделать так, чтобы при нажатии на активную кнопку ion-tab-bar внутри ion-tab-bar он переходил к этому базовому маршруту ion-tab-buttons. Прямо сейчас кажется, что если вы нажмете на активную кнопку ion-tab, она ничего не сделает.

Если у вас настроены ion-tabs, как показано ниже. 

<ion-tabs>

  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="tab1" class="ion-activatable ripple-parent">
      <ion-icon name="home"></ion-icon>
      <ion-label>Dashboard</ion-label>
      <ion-ripple-effect></ion-ripple-effect>
    </ion-tab-button>

    <ion-tab-button tab="tab2" class="ion-activatable ripple-parent">
      <ion-icon name="search"></ion-icon>
      <ion-label>Search</ion-label>
      <ion-ripple-effect></ion-ripple-effect>
    </ion-tab-button>

    <ion-tab-button tab="tab3" class="ion-activatable ripple-parent">
      <ion-icon name="key"></ion-icon>
      <ion-label>Keys</ion-label>
      <ion-ripple-effect></ion-ripple-effect>
    </ion-tab-button>

    <ion-tab-button tab="tab4" class="ion-activatable ripple-parent">
      <ion-icon name="settings"></ion-icon>
      <ion-label>Settings</ion-label>
      <ion-ripple-effect></ion-ripple-effect>
    </ion-tab-button>

  </ion-tab-bar>

</ion-tabs>

И перейдите к «tab2», у которого есть следующие дочерние маршруты. 

const routes: Routes = [
  {
    path: "",
    component: Tab2Page,
    children: [
      {
        path: "search",
        children: [
          {
            path: "",
            loadChildren: () =>
              import("../pages/search/search.module").then(
                (m) => m.SearchPageModule
              ),
          },
        ],
      },
      {
        path: "issue/:issue",
        children: [
          {
            path: "",
            loadChildren: () =>
              import("../pages/search/detail/detail.module").then(
                (m) => m.DetailPageModule
              ),
          },
        ],
      },
      {
        path: "",
        redirectTo: "/tabs/tab2/search/issue",
        pathMatch: "full",
        data: { index: 0 },
      },
    ],
  },
  {
    path: "",
    redirectTo: "/tabs/tab2/search/issue",
    pathMatch: "full",
    data: { index: 0 },
  },
];

Теперь, если вы перейдете к / tabs / tab2 / issue / 1234 и затем щелкните tab2 в нижней панели вкладок, которая должна быть выделена, ничего не произойдет. Я ожидал, что он перейдет в / tabs / tab2, что вернет пользователя в начало tab2.

Если я попытаюсь изменить свойство tab на кнопке ion-tab-button на что-то вроде «tab2 / search», кнопка табуляции больше не останется активной, и это будет работать, но мне нужно, чтобы кнопка отображалась активное состояние.

...