Дочерние маршруты с вкладками / выходами маршрутизатора не работают. «Ошибка: невозможно сопоставить ни один маршрут. Сегмент URL»

Question

Когда я пытаюсь сделать следующее:

const routes: Routes = [
  {
    path: "", component: RegisteredLayoutComponent, canActivate: [AuthGuard], children: [
      {
        path: '',
        redirectTo:
          "/(topicsTab:topicsPage//newsTab:newsPage//homeTab:homePage//askTab:askPage//moreTab:morePage)",
        pathMatch: "full"
      },
      { path: 'home', component: HomePageComponent, outlet: "homeTab" },...

{ path: '**', redirectTo: '' }

Я получаю сообщение «Ошибка: невозможно сопоставить никакие маршруты. Сегмент URL»

Я что-то не так делаю? Страница с выходами маршрутизатора выглядит следующим образом:

<BottomNavigation selectedIndex="2">
    <TabStrip backgroundColor="white">
        <TabStripItem>
            <Label text="Topics" class="icon__color"></Label>
            <Image src="~/assets/round_people_black_18dp.png" class="fas t-36 icon__color"></Image>
        </TabStripItem>
        <TabStripItem class="special">
            <Label text="News" class="icon__color"></Label>
            <Image src="~/assets/round_local_library_black_18dp.png" class="fas t-36 icon__color"></Image>
        </TabStripItem>
        <TabStripItem class="special">
            <Label text="Home" class="icon__color"></Label>
            <Image src="~/assets/round_home_black_18dp.png" class="fas t-36 icon__color"></Image>
        </TabStripItem>
        <TabStripItem class="special">
            <Label text="Ask?" class="icon__color"></Label>
            <Image src="~/assets/round_contact_support_black_18dp.png" class="fas t-36 "></Image>
        </TabStripItem>
        <TabStripItem class="special">
            <Label text="More" class="icon__color"></Label>
            <Image src="~/assets/round_more_horiz_black_18dp.png" class="fas t-36 icon__color"></Image>
        </TabStripItem>
    </TabStrip>
    <!-- The number of TabContentItem components should corespond to the number of TabStripItem components -->
    <TabContentItem>
        <page-router-outlet name="topicsTab"></page-router-outlet>
    </TabContentItem>
    <TabContentItem>
        <page-router-outlet name="newsTab"></page-router-outlet>
    </TabContentItem>
    <TabContentItem>
        <page-router-outlet name="homeTab"></page-router-outlet>
    </TabContentItem>
    <TabContentItem>
        <page-router-outlet name="askTab"></page-router-outlet>
    </TabContentItem>
    <TabContentItem>
        <page-router-outlet name="moreTab"></page-router-outlet>
    </TabContentItem>
</BottomNavigation>

Может кто-нибудь сообщить мне, как правильно перенаправить?

Спасибо !!!

Answer 1

Я понял :-) Что действительно помогло мне выбрать правильный маршрут, так это активировать трассировку:

@NgModule({
imports: [NativeScriptRouterModule.forRoot(routes, { enableTracing: true })],
exports: [NativeScriptRouterModule]

})

Когда я смог увидеть трассировку, я понял, что У меня не было зарегистрированного маршрута в пути моего перенаправления!

const routes: Routes = [
{ path: '', redirectTo: 'registeredRoute', pathMatch: 'full' },
{
    path: "registeredRoute", component: RegisteredLayoutComponent, canActivate: [AuthGuard], children: [
        { path: "", component: HomeComponent, outlet: "homeTab" },
        { path: "homePage", component: HomeComponent, outlet: "homeTab" },
        { path: "topicsPage", component: TopicsComponent, outlet: "topicsTab" },
        { path: "newsPage", component: NewsComponent, outlet: "newsTab" },
        { path: "askPage", component: AskComponent, outlet: "askTab" },
        { path: "morePage", component: MoreComponent, outlet: "moreTab" }
    ]
},
{
    path: "", component: UnregisteredLayoutComponent, children: [
        { path: '', redirectTo: 'loginPage', pathMatch: 'full' },
        { path: "loginPage", component: LoginComponent }

    ]
    ,
},
 { path: '**', redirectTo: '', pathMatch: 'full' }

];

Answer 2

При входе в систему вы пытались перемещаться относительно, но вы должны загрузить другой модуль (в соответствии с настройкой вашего маршрутизатора вход в систему находится под unRegisteredRoute, а просмотр вкладок - под registeredRoute).

this.router.navigate(["/registeredRoute", { outlets: { topicsTab: ['topicsPage'], newsTab: ['newsPage'], homeTab: ['homePage'], askTab: ['askPage'], moreTab: ['morePage'] } }]);

Обновленная игровая площадка