通过使用角度路由未选择默认路由答案

【问题标题】：By using angular routing not getting default route selected通过使用角度路由未选择默认路由
【发布时间】：2019-07-19 11:09:07
【问题描述】：

我将 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
  }]
}]

sidebarcomponent.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 总是错误的。

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

【问题讨论】：

如果去掉这个: { path:'', component: ActivityDashboardComponent, pathMatch: 'full' }，它可以正常工作吗？
不，@罗伯特加西亚

标签： angular angular6 angular-routing

【解决方案1】：

第一个路径将重定向到您的默认路径。这里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},
    ]
  }
]

【讨论】：

正如我在问题中所描述的，我关心的是 rla -> routerLinkActive。最初的 rla 是错误的。但默认情况下，它应该会实现，但不会实现。基于该 rla 值，我正在显示图像。

【解决方案2】：

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

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

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},
    ]
  }
]

【讨论】：