Ionic 4 ion-tabs - ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment:

Question

我的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 在 conv-conversation.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，它将充当我的选项卡的 'home'。 conv-conversation.html 的底部是上面的 HTML 代码。当我单击 conversation-files 按钮时，出现此错误：

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'conversation-tabs/conv-conversation/conversation-files' Error: Cannot match any routes. URL Segment: 'conversation-tabs/conv-conversation/conversation-files'

我不太确定问题出在哪里，因为我的路由已设置。我错过了什么吗？

Answer 1

导致 conversation-files 的 link 设置不正确，因为它显然是附加路径而不是替换路径。我相信您没有正确设置组件结构。您需要在 path: 'conversation-tabs' 处有一个 ConversationTabsPage（随意命名）组件，然后将标签按钮放在那里：

<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'
      }
    ]
  }

同时从 conv-conversation.html 中删除选项卡按钮。我提到了这个stack blitz。

编辑：我为您的特定用例创建了另一个 stack blitz。路由工作时它显示空白内容的原因是因为你的 ion-tabs 被包裹在 ion-toolbar 中。

Ionic 4 ion-tabs - ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment:

Ionic 4 ion-tabs - ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment:

angular

ionic-framework

ionic-tabs