ActivatedRoute parameter is empty-CodePudding

A lot of people had this problem, but none of the solutions worked for me.

My router module

const routes: Routes = [
    { path: '', redirectTo: 'screen/home', pathMatch: 'full' },
    { path: 'index.jsp', redirectTo: 'screen/home' },
    { path: 'screen/home', component:HomeComponent },
    { path: 'screen/logs', component:LogsComponent },
    { path: 'screen/logs/job-logs', component:JobLogsComponent},
];

@NgModule({
    imports: [
        RouterModule.forRoot(routes),
    ],
})
export class AppRoutingModule {}

The component that reroutes

@Component({
    templateUrl: './logs.component.html',
    styleUrls: ['./logs.component.scss'],
})
export class LogsComponent {    
constructor(
        private route:Router,
    ){
    }
    getJobLogs(jobId:String){
        this.route.navigate(['/screen/logs/job-logs'],{queryParams: {jobId}});
    }
}

The component where I'm trying to retrieve the parameter

@Component({
    templateUrl: './job-logs.component.html',
    styleUrls: ['./job-logs.component.scss'],
})
export class JobLogsComponent{
    jobId: String;
    constructor(
        private route:ActivatedRoute,
    ){

        console.log(this.route.snapshot.paramMap.get("jobId"));
        this.jobId = this.route.snapshot.paramMap.get('jobId');
        this.jobId = this.route.params['jobId'];
        this.route.params.subscribe(params=>
            this.jobId=params['jobId']
        );
    }
}

I've tried to get the parameters in the onInit method too.

The url will be something like http://localhost:4200/screen/logs/job-logs?jobId=9oEZbtlZRCip86iFtQj6EQ

I've tried inputting the parameter manually in the URL to something simpler like 23, but no success.

The routing module of the jobs-logs

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { JobLogsComponent } from './job-logs.component';

const routes: Routes = [
    { path: '', component: JobLogsComponent },
];

@NgModule({
    imports: [
        RouterModule.forChild([
            { path: '', component: JobLogsComponent }
        ])
    ],
})
export class JobLogsRoutingModule {}

CodePudding user response：

I think you missed this path :

{ path: 'screen/logs/job-logs/:id', component:JobLogsComponent},

CodePudding user response：

I can't figure out why the ActivatedRoute Class doesn't work properly.

But I noticed the member url from the Router Class was working.

So I figured out a workaround with the Router class.

this.jobId = this.router.parseUrl(this.router.url).queryParams['jobId'];