角度2

Question

にルータとの問題を持って、私はダッシュボード、お客様のようなナビゲーションバー、製品を持っているユーザがシステムにログインした後。これはルートファイルを設定する方法です。

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は、ここにファイルに含まれていない、それは輸出クラスが含まれており、templateUrl

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

そしてここでは、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はダッシュボードとしてリンクしていません。では、私のルート設計はうまくいきますか？提案してください。私はあなたが以下のようにダッシュボードリンクのrouterLinkActiveOptionsを含める必要があると思う

Answer 1

：

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