Ionic 4 и использование материала вкладки маршрутизатора розетки

Question

Я хочу использовать вкладку "Материал" (https://material.angular.io/components/tabs/api#MatTabLink) в рамках моего проекта Ionic 4), теперь требования заключаются в том, что мне нужно разместить несколько представлений на вкладке, и первой мыслью было, что я могу использовать новый ion-router-outlet или router-outlet в моем родительском компоненте.

Имейте в виду, что у меня уже есть один выход маршрутизатора для основного приложения.

Мне лень загружать основные маршруты чата в моем app-routing.module.ts , эта страница отвечает за загрузку вкладок.

  { path: 'chat', loadChildren: './chat/chat.module#ChatPageModule', canActivate: [ AuthGuard ]}

Теперь в моем chat.module.ts у меня есть следующеемаршруты:

{ path: '', component: ChatPage },
{ path: 'active', component: ActivePage },
{ path: 'messages', component: MessagesPage },
{ path: 'teams', component: TeamsPage }

ChatPage - это моя родительская страница просмотра вкладок. Остальные, которые я хочу видеть на вкладке.

HTML-код для отображения этих вкладок находится в chat.page.htmlи выглядит так:

<nav mat-tab-nav-bar>
        <a mat-tab-link
            *ngFor="let link of routeLinks"
            [routerLink]="link.path"
            routerLinkActive #rla="routerLinkActive"
            [active]="rla.isActive">

            {{ link.label }}
        </a>
    </nav>
<router-outlet></router-outlet>

Я также пытался <ion-router-outlet></ion-router-outlet>, но это вызывает больше проблем.

Основная проблема здесь заключается в том, что маршруты выглядят так, как будто они загружаются вя не пытался добавить основной маршрутизатор, а не дочерний.разметка, но моя IDE утверждает, что она недействительна и, похоже, не работает.

Answer 1

Хорошо, я понял это, и я буду выглядеть глупо, потому что не пытался сделать это раньше, но проблема заключалась в том, что для использования этого дочернего маршрутизатора-выхода маршруты, которые я хотел во вкладках, должны быть дочерними маршрутами.

{ path: '', component: ChatPage, children: [
            { path: 'active', component: ActivePage },
            { path: 'messages', component: MessagesPage },
            { path: 'teams', component: TeamsPage }
        ] },