0

我正在使用 routerLinkActive 选择默认路由，同时我也显示图像。在初始加载图像不来。通过更改选项卡，图像可以正确显示。

下面是我的代码：

应用路由文件：

export const routes: Routes = [{
  path: 'adminsidebar',
  canActivate: [AuthGuardService],
  component: SidebarComponent,
  children: [
  {
    path: '',
    component: ActivityDashboardComponent,
    pathMatch: 'full'
  },
  {
    path: 'activitydashboard',
    component: ActivityDashboardComponent
  },
  {
    path: 'therapistdashboard',
    component: TherapistDashboardComponent
  },
  {
    path: 'reviewapprovaldashboard',
    component: ReviewApprovalComponent
  },
  {
    path: 'feedbackdashboard',
    component: FeedbackComponent
  },
  {
    path: 'clientdashboard',
    component: ClientdashboardComponent
  }]
}]

侧边栏组件.ts：

<li id="activity" [routerLink]="['./activitydashboard']" [routerLinkActive]="['Active']" [ngClass]="rla.isActive?'active':''" #rla="routerLinkActive" class="Active pointer">
  <p class="link-items pointer">
    <img *ngIf="!rla.isActive" src="/assets/img/activity-blue-retina.png" class="links-img" alt=""> {{ rla.isActive }}
    <img *ngIf="rla.isActive" [ngClass]="rla.isActive?'active':''" src="/assets/img/activity-white-retina.png" class="links-img" data-srcset="/assets/img/activity-white@2x.png,/assets/img/activity-white@3x.png" alt="">
    <span class="list-labels"> Activity </span>
  </p>
</li>

因为我已经拍摄了两张图像并显示了rla.isActive价值。在初始化时rla.IsActive总是错误的。

如何解决这个问题。请帮帮我。。

4

2 回答 2

0

第一个路径将重定向到您的默认路径。这里redirectTo会将您重定向到您的“adminsidebar”路线。

export const routes: Routes = [
 { path: '', redirectTo:'adminsidebar' , pathMatch:'full'},
 { path: 'adminsidebar', canActivate: [ AuthGuardService ], component:SidebarComponent , children:[
        { path:'', component: ActivityDashboardComponent, pathMatch: 'full' },
        { path:'activitydashboard', component: ActivityDashboardComponent },
        { path:'therapistdashboard', component:TherapistDashboardComponent},
        { path:'reviewapprovaldashboard', component:ReviewApprovalComponent},
        { path:'feedbackdashboard' , component:FeedbackComponent},
        { path:'clientdashboard' , component:ClientdashboardComponent},
    ]
  }
]
于 2019-07-19T11:17:06.560 回答
0

您还可以使用空路径和通配符路径重定向到您的特定路径。根据角度指南遵循这些说明

最后一条路由中的 ** 路径是通配符。如果请求的 URL 与配置中先前定义的路由的任何路径都不匹配，路由器将选择此路由。这对于显示“404 - 未找到”页面或重定向到另一条路线很有用。

export const routes: Routes = [
 { path: '', redirectTo:'adminsidebar' , pathMatch:'full'},
{ path: '**', redirectTo:'adminsidebar' , pathMatch:'full'},
 { path: 'adminsidebar', canActivate: [ AuthGuardService ], component:SidebarComponent , children:[
        { path:'', component: ActivityDashboardComponent, pathMatch: 'full' },
        { path:'activitydashboard', component: ActivityDashboardComponent },
        { path:'therapistdashboard', component:TherapistDashboardComponent},
        { path:'reviewapprovaldashboard', component:ReviewApprovalComponent},
        { path:'feedbackdashboard' , component:FeedbackComponent},
        { path:'clientdashboard' , component:ClientdashboardComponent},
    ]
  }
]
于 2019-07-19T12:34:18.857 回答