在 CanActivate 保护延迟加载模块 Angular 中获取目标路由 URL答案

【问题标题】：Get target route URL in CanActivate guard Lazy load modules Angular在 CanActivate 保护延迟加载模块 Angular 中获取目标路由 URL
【发布时间】：2018-03-21 11:21:26
【问题描述】：

我正在尝试在 canActivate 防护中获取目标 URL，但无法这样做。当我使用ActivatedRoute 时，我在RouterModule.forRoot 中配置了preloadingStrategy: PreloadAllModules，它的url 属性不包含路径。这是我的两个模块：

app.module.ts

const appRoutes: Routes = [
  { path: 'login', component: LoginComponent },
  {
    path: '',
    component: SiteLayoutComponent,
    children: [
      { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
      {
        path: 'dashboard',
        loadChildren: './dashboard/dashboard.module#DashboardModule'
      },
      {
        path: 'user',
        loadChildren: './user/user.module#UserModule'
      }
    ]
  },
  { path: '**', component: PageNotFoundComponent }
];

@NgModule({
  declarations: [
    AppComponent,
    SiteLayoutComponent,
    LoginComponent,
    PageNotFoundComponent,
  ],
  imports: [
    RouterModule.forRoot(
      appRoutes,
      { enableTracing: false, preloadingStrategy: PreloadAllModules } 
    ),
    BrowserModule,
    BrowserAnimationsModule,
    HttpClientModule,
    HttpModule,
    FormsModule,
    CommonModule,
  ],
  providers: [AuthGuardAuthService, LoginService, SharedService],
  bootstrap: [AppComponent]
})
export class AppModule { }

user.module.ts

const appRoutes: Routes = [
    {
        path: 'user',
        children: [
            { path: '', redirectTo: 'create', pathMatch: 'full' },
            {
                path: 'create', component: CreateComponent, canActivate: [RouteGuard] //need activated route in this guard
            },
            { path: ':id/edit', component: CreateComponent },
            { path: 'list', component: UserListComponent }
        ],

    },
    {
        path: 'role',
        children: [
            { path: '', redirectTo: 'create', pathMatch: 'full' },
            {
                path: 'create', component: RoleComponent,
                resolve: {
                    Modules: RolesResolver
                }
            },
            {
                path: ':id/edit', component: RoleComponent,
                resolve: {
                    Modules: RolesResolver,
                }
            },
            { path: 'list', component: RoleListComponent },
        ],
    },
];

@NgModule({
    declarations: [
        CreateComponent,
        RoleComponent,
        UserListComponent,
        RoleListComponent
    ],
    imports: [
        CommonModule,
        FormsModule,
        RouterModule.forChild(
            appRoutes
        )
    ],
    providers: [RouteGuard, UserService, RoleService, RolesResolver],
})
export class UserModule { }

我需要在 RouteGuard 中激活路由。

【问题讨论】：

标签： angular typescript angular-router

【解决方案1】：

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot){
    console.log("route-access", state);
}

来自this 的回答。

【讨论】：

已经尝试过了：StaticInjectorError[ActivatedRouteSnapshot]: NullInjectorError: No provider for ActivatedRouteSnapshot！
你是这样导入的吗？ import {ActivatedRouteSnapshot, CanActivate, RouterStateSnapshot} from "@angular/router";
是的，这是我对 RouteGuard 的导入： import { Router, CanActivate, ActivatedRoute, CanActivateChild, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
这真的很奇怪，因为这对我有用。您使用的是什么 Angular 版本？这是用 Angular 5 制作的吗？
嘿 @ForestG 谢谢我的 canActivate 方法有问题。我在服务构造函数中注入了 ActivatedRouteSnapshot 提供程序，而不是 canActivate。干杯老兄:)