1

我的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' 错误：无法匹配任何路由。URL 段：'conversation-tabs/conv-conversation/conversation-files'

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

4

1 回答 1

1

您指向的链接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'
      }
    ]
  }

还要从您的conv-conversation.html中删除选项卡按钮。我提到了这个堆栈闪电战。

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

于 2020-02-07T16:36:59.593 回答