无法导航到左侧菜单或打开新报告？

Question

我正在使用angular 7应用程序，我遇到的问题是我的问题无法浏览

左侧菜单。我只能从左侧菜单中选择一个报告，但无法导航

直到我重新加载组件报告类别，这意味着必须转到主菜单才能打开新报告。

报告类别组成部分：

<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> 

应用程序路由模块

path: 'pages',component: PagesComponent , children: [{ path: '', component: HomeComponent },

{path:'report',component:ReportcategoryComponent,children:[
{path:'reportdetails',component:ReportdetailsComponent},
{path:'reportdetails/:id',component:ReportdetailsComponent},
]},

当从左侧上方的任何报告导航时，没有任何变化并且不转到相关报告详细信息报告。

那么如何解决导航新报告问题？

Answer 1

在路由器出口上，我从路由器出口上删除了类bootstarp

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

从路由器插座中删除class =“ col-12”时它可以正常工作