离子 4 离子片 - 错误 错误:未捕获(承诺):错误:无法匹配任何路由.网址段:.

Question

Myapp-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按钮时，出现此错误：

错误 错误：

未捕获(在承诺中(：错误：无法匹配任何路由。 网址细分："对话标签/卷对话/对话文件" 错误：无法匹配任何路由。网址段： '对话选项卡/转换对话/对话文件'

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

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中删除选项卡按钮。 我提到了这个堆栈闪电战。

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