как свойство реализовать ioni c 4 / angular вкладки под маршрутов?

Question

Я недавно переключился с разделенной панели на вкладки в моем приложении ioni c 4. Я установил вкладки в моем компоненте панели мониторинга. dashboard.page. html

 <ion-tabs>
 <ion-tab-bar slot="bottom">

 <ion-tab-button tab="profile-edit">
 <ion-icon name="person"></ion-icon>
  <ion-label>Profile</ion-label>
  </ion-tab-button>

<ion-tab-button  tab="job-center">
  <ion-icon name="hammer"></ion-icon>
  <ion-label>Job Center</ion-label>
</ion-tab-button>

 <ion-tab-button tab="home">
  <ion-icon name="search"></ion-icon>
  <ion-label>Home</ion-label>
</ion-tab-button>

  <ion-tab-button tab="settings">
  <ion-icon name="cog"></ion-icon>
  <ion-label>Settings</ion-label>
  </ion-tab-button>

  </ion-tab-bar>
  </ion-tabs>

Вторая кнопка на вкладке связана с компонентом центра заданий. Компонент центра заданий имеет список с событиями кликов, который предназначен для перехода на другие страницы. Как только я нажимаю на этот список, URL-адрес изменяется, а представление - нет. Мне было интересно, почему URL-адрес меняется, но страница не будет отображаться. *** job-center.page. html

<ion-header>
<ion-toolbar>
<ion-title>Job Center</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
 <ion-list>
<ion-item lines="full" (click)="toPosted()" >
  <ion-icon name="list-box"></ion-icon>
  <ion-label>Posted Jobs</ion-label>
  <ion-badge color="primary">{{postedJobs}}</ion-badge>
</ion-item>
<ion-item lines="full" (click)="toApplied()">
  <ion-icon name="checkmark-circle"></ion-icon>
  <ion-label>Jobs Applied</ion-label>
  <ion-badge color="primary">{{appliedJobs}}</ion-badge>
</ion-item>
<ion-item lines="full" (click)="toJobCompleted()">
  <ion-icon name="checkmark"></ion-icon>
  <ion-label>Completed Jobs</ion-label>
  <ion-badge color="primary">{{completedJobs}}</ion-badge>
</ion-item>
<ion-item lines="full" (click)="toApplicants()" >
  <ion-icon name="done-all"></ion-icon>
  <ion-label>Applicants</ion-label>
  <ion-badge color="primary">{{applicants}}</ion-badge>
</ion-item>
 </ion-list>
</ion-content>

*** job-center.page.ts

import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
 import { Storage } from '@ionic/storage';
import { DataService } from 'src/app/data.service';
@Component({
selector: 'app-job-center',
templateUrl: './job-center.page.html',
styleUrls: ['./job-center.page.scss'],
})
  export class JobCenterPage implements OnInit {

constructor(private router: Router,public storage: Storage,
public _data: DataService) { }
userData;
postedJobs;
 completedJobs;
appliedJobs;
applicants;
dataLengths;

 ngOnInit() {

}

ionViewWillEnter(){
    this.userData = this.storage.get('user');
    this.storage.get('user').then((value)=>{
      this.userData = value;
      this._data.getCurrentUser(this.userData._id)
      .subscribe(
        res=>(
        this.dataLengths = res,
        this.completedJobs = this.dataLengths.completedJobs.length,
        this.appliedJobs= this.dataLengths.appliedJobs.length,
        this.postedJobs = this.dataLengths.postedJobs.length,
        this.applicants = this.dataLengths.applicants.length
        ),
        err=> console.log(err)
      )
      })
  }

  toApplied(){
  this.router.navigate(['dashboard/job-center/applied-jobs'])
 }

 toJobCompleted(){
  this.router.navigate(['dashboard/job-center/job-completed'])
  }

  toPosted(){
   this.router.navigate(['dashboard/job-center/posted'])
  }

toApplicants(){
  this.router.navigate(['dashboard/job-center/applicants'])
 }
   }

Основная страница маршрутизации: *** панель инструментов. module.ts

  import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
  import { Routes, RouterModule } from '@angular/router';
  import {DashboardPage} from './dashboard.page';
  import {HomePage } from 'src/app/dashboardComponents/home/home.page';
   import {JobCenterPage} from 'src/app/dashboardComponents/job-center/job-center.page';
  import {SettingsPage} from 'src/app/dashboardComponents/settings/settings.page';
  import {ProfileEditPage } from 'src/app/dashboardComponents/profile-edit/profile-edit.page';
 import {PostedJPage } from 'src/app/dashboardComponents/posted-j/posted-j.page';
  import { AppliedJobsPage} from 'src/app/dashboardComponents/applied-jobs/applied- 
  jobs.page';
  import { JobCompletedPage } from 'src/app/dashboardComponents/job-completed/job-completed.page';
  import { ApplicantsPage} from 'src/app/dashboardComponents/applicants/applicants.page'
 import { IonicModule } from '@ionic/angular';

 const routes: Routes = [
{
path:'dashboard',
component:DashboardPage,
children: [
  {
    path: "home",
    component: HomePage
  },
  {
    path: "job-center",
    component: JobCenterPage,
    children:[
      {
        path:"posted",
        loadChildren: 'src/app/dashboardComponents/posted-j/posted-j.module#PostedJPageModule'
      },
      {
        path:"applied-jobs",
        component:AppliedJobsPage
      },
      {
        path:"job-completed",
        component:JobCompletedPage
      },
      {
        path:"applicants",
        component:ApplicantsPage
      },

     ]
       },
        {
     path: "profile-edit",
     component: ProfileEditPage
    },
      {
       path: "settings",
       component: SettingsPage
       }
      ]
    }
   ]

  @NgModule({
  imports: [
   CommonModule,
  FormsModule,
  IonicModule,
  RouterModule.forChild(routes)
   ],
  declarations: []
   })
    export class DashboardPageModule {}

*** app.module.ts

 import { NgModule } from '@angular/core';
  import { FormsModule } from '@angular/forms';
   import { BrowserModule } from '@angular/platform-browser';
   import { RouteReuseStrategy } from '@angular/router';
  import { HttpClientModule , HTTP_INTERCEPTORS} from "@angular/common/http"
   import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
   import { StatusBar } from '@ionic-native/status-bar/ngx';
   import { Geolocation } from '@ionic-native/geolocation/ngx';
   import {components} from './app-routing.module';
   import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { DashboardPageModule } from './dashboard/dashboard.module';
 import { AuthService } from './auth.service'
 import { AuthGuard} from './auth.guard'
 import { UpdateService} from './update.service'
import {ReviewService} from './review.service'
import { SendmessageService} from './sendmessage.service'
import { SubscriptionService} from './subscription.service';
import { TokenInterceptorService} from './token-interceptor.service'
 import { IonicStorageModule } from '@ionic/storage';
 import { PhotoViewer } from '@ionic-native/photo-viewer/ngx';
import {Camera} from '@ionic-native/camera/ngx';
import { Network } from '@ionic-native/network/ngx';
import { IonicRatingModule } from 'ionic4-rating';
import { DocumentViewer } from '@ionic-native/document-viewer/ngx';
@NgModule({
  declarations: [
  AppComponent,
  components
  ],
   entryComponents: [],
  imports: [BrowserModule,
   IonicModule.forRoot(),
   AppRoutingModule,
    DashboardPageModule,
    FormsModule,
   HttpClientModule,
    IonicRatingModule,
   IonicStorageModule.forRoot({
    name:"db",
    driverOrder: ['websql','sqlite',]
   })],
   providers: [
    StatusBar,
    Geolocation,
     AuthService,
     SendmessageService,
    UpdateService,
    ReviewService,
    SubscriptionService,
    AuthGuard,
    PhotoViewer,
    DocumentViewer,
    Camera,
    Network,
    IonicStorageModule,
   { provide: HTTP_INTERCEPTORS, useClass:TokenInterceptorService ,multi: 
  true}
    ],
    bootstrap: [AppComponent]
   })
    export class AppModule {}

Когда я нажимаю на элемент списка на странице центра вакансий, URL-адрес меняется, но страница меняется не изменить. Эти страницы являются суб-маршрутами Job-центра, как вы можете видеть в dashboard.module.ts