How to pass the value and get the value from another page via routerlink in angular4?

I want to pass a value with URL using routerLink and read that value on another page. Like I have Modules and Submodules. On select of first record the id of that record pass to User page. After read that Userid I want to show detail of that User and modules/submodules.

So How can I pass and get the Values(object)?

Userdetails Component class:

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
selector: 'userdetail',
templateUrl: './userdetail.component.html',
styleUrls: ['./userdetail.component.css']
})
export class UserdetailComponent implements OnInit {

username: any;
moduleid: any;
submoduleid: any;
login: any;

constructor(private _route:ActivatedRoute){}
ngOnInit() {
this._route.params.subscribe(params => {

this.username = params['moduleid']

});
}
}


Login Component class:

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { Userslogin } from 'app/users/userslogin';
import { Router } from '@angular/router';
import { UserloginService } from 'app/userlogin/userlogin.service';
import { User } from 'app/userlogin/user';


@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {

myForm: FormGroup;

user = new User;

login: any;
modules=[];
module: any;
usernam: any;
pass: any;
moduleid: any;
submoduleid: any;

submitted = false;

i; j;

constructor(private editionService: UserloginService, private router: Router) {

const username = new FormControl('', Validators.required);
const password = new FormControl('', Validators.required);

this.myForm = new FormGroup({
username: username,
password: password
});
}

ngOnInit() {

}



loginuser() {
this.usernam = this.myForm.get('username').value;
this.pass = this.myForm.get('password').value;
this.editionService.getlogin(this.usernam, this.pass ).subscribe(
login => this.login = login);
this.moduleid = this.login[0].moduleid;




if(this.login != null){
this.router.navigate(['userlogin/userdetail', this.moduleid] );
}

else {
alert('Click login')
}

}



}


Router:

export const UserloginRoutes: Routes =[{
path: '',
children: [
{path: 'login',
component:LoginComponent,
},
{path:'userdetail/:moduleid', component: UserdetailComponent}
]}]

Continue reading...