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:
我的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'
我不太确定问题出在哪里,因为我的路由已设置。我错过了什么吗?
导致 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
中。
我的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'
我不太确定问题出在哪里,因为我的路由已设置。我错过了什么吗?
导致 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
中。