经与路由器问题的角度2

我有一个导航栏一样仪表板，客户，产品用户登录到系统后。这是我设置我的路线文件的方式。经与路由器问题的角度2

app.routing.ts

export const router: Routes = [ 
{ 
    path: '', 
    redirectTo: 'admin', 
    pathMatch: 'full', 
    canActivate: [AuthGuard], 
}, 
{ 
    path: 'admin', 
    component: AdminComponent, 
    canActivateChild: [AuthGuard], 
    children: [ 
     { 
      path: 'customer', 
      component: CustomerComponent 
     }, 
     { 
      path: 'product', 
      component: ProductComponent 
     }, 
     { 
      path: '', 
      component: DashboardComponent 
     } 
    ] 
}, 
{ path: 'login', component: LoginComponent } 
]; 

export const routes: ModuleWithProviders = RouterModule.forRoot(router);

我app.component.html文件作为基础文件。并没有包括app.component.ts这里文件，它包含

<router-outlet></router-outlet>

我管理，dashboard.component.ts文件

@Component({ 
selector: 'app-admin', 
template: ` 
    <div class="wrapper"> 
     <!-- Start of the navigation bar --> 
     <app-navbar></app-navbar> 
     <!-- END NAVIGATION --> 
      <div class="customer-panel"> 
      <router-outlet></router-outlet> 
      </div><!-- End of the customer panel --> 

    </div><!-- /end wrapper --> 
` 
}) 
export class AdminComponent implements OnInit {}

在这里，出口类和templateUrl是navbar.component的.html文件

<div class="collapse navbar-collapse" id="navigate"> 
      <ul class="nav navbar-nav"> 
      <li><a routerLink="" routerLinkActive="active">Dashboard</a></li> 
      <li><a routerLink="customer" routerLinkActive="active">Customers</a></li> 
      <li><a routerLink="product" routerLinkActive="active">Products</a></li> 
      <li><a routerLink="user">User</a></li> 
      <li><a href="product-transactions.html">Transactions</a></li> 
      <li><a href="#">Reports</a></li> 
      </ul> 
     </div>

所以，我所做的是我的应用程序加载app.component.html文件其中包含路由器插座。然后加载admin.component.html文件，我已经加载其他导航栏链接作为admin.component.ts文件与路由器插座的孩子。它运作良好，但routerLinkActive不作为仪表板链接始终在此处处于活动状态。那么，我的路线设计很好吗？建议请。

来源

2016-12-15 user3127109

我认为你需要包括routerLinkActiveOptions详情如下，仪表板链接：

<li><a routerLink="" routerLinkActive="active" [routerLinkActiveOptions]="{exact:true}">Dashboard</li>

来源

2016-12-15 12:02:16 ranakrunal9

现在，各个环节都在积极活跃，但仪表板本身不活跃。 – user3127109

经与路由器问题的角度2

回答

相关问题