Ionic 4 ion-tabs - 错误错误：未捕获（承诺）：错误：无法匹配任何路由。网址段：

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

conv-conversation.html 中的 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 按钮时，我收到此错误：

ERROR 错误：未捕获（在承诺中）：错误：无法匹配任何路由。 URL 段：'conversation-tabs/conv-conversation/conversation-files' 错误：无法匹配任何路由。网址段： 'conversation-tabs/conv-conversation/conversation-files'

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

Answer 1

指向conversation-files 的链接设置不正确，因为它显然是附加路径而不是替换它。 我相信您没有正确设置组件结构。你需要在你的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 中。