I’ve recently switched from a split panel to ion tabs. The tabs works fine but accessing the sub routes is very difficult. The routes are in dashboard.module.ts below
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 {}
I am trying to access the child routes of job center and the url changes but the page does not load.
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'])
}
}
The tab has four links and job center is one of them. Job center also has an item list with click events to navigate to the sub routes on job center but it does not work. The url changes but the pages do not load.
Please help
