menu click working on report component but report details no

Question

I work on angular 7 app contain two component 

report 

reportdetails

 

when i open my app main component is report component

 

report component have left side menu when click on reportid it go to reportdetail component and based on report id

 

it display data related to it on report detail component 

 

my problem if you click any report id from menu on report detail component not working and

 

if click on menu on any report id on report component it working

 

Not working when click on any report from menu on report details component no effect happen so how to solve this issue please ? 

 

menu have issue as below 

 

<div class="row" style="display: block;float: left;margin-left:10px; margin-top: 2px;">
    <div class="page-sidebar navbar-collapse collapse">
    <nav class="colsm12" id="">
            <ul *ngFor="let rep of reportlist" class="accordion"  style="margin-top:2px;"  class="page-sidebar-menu" data-keep-expanded="false" data-auto-scroll="true" data-slide-speed="200">

                    <li class="active open">
                        <a  id="menu" >
                            <i class="rep.menuIcon"></i>
                            <span >{{rep.reportCategory}}</span>

                        </a>
                        <ul *ngFor="let subrep of subreportlist"  style="display:block;" id="submenu" style="padding-left:7px;">


                            <div *ngIf="subrep.reportCategoryID === rep.reportCategoryID" class="wrapper" >


                              <a [routerLink]="['/pages/report/reportdetails']" [queryParams]="{id: subrep.reportID}" >


                                            <span class="sideNav nav navbar">{{subrep.reportName}}</span>

                                        </a>

                            </div>



                        </ul>



            </ul>
        </nav>
        </div>
    </div>
    <div class="col-12">
        <router-outlet></router-outlet>
        </div>