Ioni c 4 ion-tabs - ОШИБКА Ошибка: Uncaught (в обещании): Ошибка: не удается сопоставить ни один маршрут. Сегмент URL: - PullRequest
Новая
       34

Ioni c 4 ion-tabs - ОШИБКА Ошибка: Uncaught (в обещании): Ошибка: не удается сопоставить ни один маршрут. Сегмент URL:

1 голос
/ 07 февраля 2020

My app-routing.module.ts : 

  {
    path: 'conversation-tabs',
    children: [
      {
        path: 'conv-conversation',
        children: [
          {
            path: '',
            loadChildren:
              '/conv-conversation.module#ConvConversationPageModule',
          }
        ]
      },
      {
        path: 'conversation-files',
        children: [
          {
            path: '',
            loadChildren:
              '/conversation-files.module#ConversationFilesPageModule',
          }
        ]
      },
      {
        path: '',
        redirectTo: '/conversation-tabs/conv-conversation',
        pathMatch: 'full'
      }
    ]
  }

HTML in conv-разговор. html: 

<ion-toolbar>
  <ion-tabs>
      <ion-tab-bar slot="bottom" color="light">
          <ion-tab-button tab="conv-conversation">
              <ion-icon name="text"></ion-icon>
              <ion-label>Messages</ion-label>
              <ion-badge>{{ unreadMsgs }}</ion-badge>
          </ion-tab-button>

          <ion-tab-button tab="conversation-files">
              <ion-icon name="folder"></ion-icon>
              <ion-label>Files</ion-label>
          </ion-tab-button>
      </ion-tab-bar>
  </ion-tabs>

Вот как работает мой процесс: 

Login -> Home -> Pick Conversation (contains button to go to conversation-tabs)

conversation-tabs перенаправляет на conv-conversation, который будет служить «домом» для моих вкладок. Внизу conv-conversation.html находится код HTML выше. Когда я нажимаю кнопку conversation-files, я получаю эту ошибку:

Ошибка: ошибка (в обещании): ошибка: невозможно сопоставить ни один маршрут. Сегмент URL: «вкладки разговора / файлы разговора / файлы разговора» Ошибка: невозможно сопоставить ни один маршрут. Сегмент URL: «закладки-разговоры / разговоры-разговоры / файлы-беседы»

Я не совсем уверен, в чем проблема, так как моя маршрутизация установлена. Я что-то упустил?

1 Ответ

1 голос
/ 07 февраля 2020

Ваша ссылка, ведущая к conversation-files, установлена ​​неправильно, поскольку, по-видимому, она добавляет путь вместо его замены. Я считаю, что вы не правильно настроили свою компонентную структуру. Вам нужно иметь компонент ConversationTabsPage (назовите его так, как вам нравится) на вашем path: 'conversation-tabs', а затем поместить туда кнопки вкладок: 

<ion-toolbar>
  <ion-tabs>
      <ion-tab-bar slot="bottom" color="light">
          <ion-tab-button tab="conv-conversation">
              <ion-icon name="text"></ion-icon>
              <ion-label>Messages</ion-label>
              <ion-badge>{{ unreadMsgs }}</ion-badge>
          </ion-tab-button>

          <ion-tab-button tab="conversation-files">
              <ion-icon name="folder"></ion-icon>
              <ion-label>Files</ion-label>
          </ion-tab-button>
      </ion-tab-bar>
  </ion-tabs>
</ion-toolbar>

, то есть в вашем app-routing.module. ts у вас будет следующее: 

{
    path: 'conversation-tabs',
    component: ConversationTabsPage,
    children: [
      {
        path: 'conv-conversation',
        children: [
          {
            path: '',
            loadChildren:
              '/conv-conversation.module#ConvConversationPageModule',
          }
        ]
      },
      {
        path: 'conversation-files',
        children: [
          {
            path: '',
            loadChildren:
              '/conversation-files.module#ConversationFilesPageModule',
          }
        ]
      },
      {
        path: '',
        redirectTo: '/conversation-tabs/conv-conversation',
        pathMatch: 'full'
      }
    ]
  }

Также удалите кнопки табуляции из вашего разговора. html. Я ссылался на этот стек блиц .

РЕДАКТИРОВАТЬ : я создал еще один стек блиц для вашего конкретного c варианта использования, где он работает. Причина, по которой при работе маршрутизации показывалось пустое содержимое, заключалась в том, что ваш ion-tabs был обернут в ion-toolbar.

...