美文网首页
angular 子路由和路由拦截

angular 子路由和路由拦截

作者: 米诺zuo | 来源:发表于2020-12-11 21:59 被阅读0次

app.module.ts


@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
   // ....
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app-routing.module.ts

CanActivateGuard, CanDeactivateGuard 需要provider

const routes: Routes = [
  {
    path: 'tutorial', loadChildren: './tutorial/tutorial.module#TutorialModule',
    canActivate: [CanActivateGuard], canDeactivate: [CanDeactivateGuard]
  },
  {
    path: 'community', component: CommunityComponent, canActivate: [CanActivateGuard], canDeactivate:     
    [CanDeactivateGuard]
  },
];

// preloadingStrategy 预加载其他模块
@NgModule({
  imports: [RouterModule.forRoot(routes, {preloadingStrategy: PreloadAllModules})],
  exports: [RouterModule],
  providers: [CanActivateGuard, CanDeactivateGuard]
})
export class AppRoutingModule { }

tutorial.module.ts

在该文件中需要引入tutorial用到所有的component。

@NgModule({
    declarations: [
        TutorialSlideComponent,
        TutorialStartedComponent,
        TutorialModelComponent,
        TutorialAnalysisComponent,
        TutorialSurveyComponent,
        TutorialComponent
    ],
    imports: [
        TutorialRoutingModule,
        CommonModule,  
        FormsModule
    ],
})
export class TutorialModule {}

注意 CommonModule 引入,因为主路由模块已经引入 BrowserModule,在子路由模块中引入CommonModule就可以

tutorial-routing.module.ts

const routes: Routes = [
    {
        path: '', component: TutorialComponent,  // path 设为''
        children: [
          {
            path: '', redirectTo: 'started', pathMatch: 'full', canActivate: [CanActivateGuard], canDeactivate: [CanDeactivateGuard]
          },
          {
            path: 'started', component: TutorialStartedComponent, canActivate: [CanActivateGuard], canDeactivate: [CanDeactivateGuard]
          },
          {
            path: 'model/api', component: TutorialModelComponent, canActivate: [CanActivateGuard], canDeactivate: [CanDeactivateGuard]
          },
          {
            path: 'topic/analysis/ae', component: TutorialAnalysisComponent,
            canActivate: [CanActivateGuard], canDeactivate: [CanDeactivateGuard]
          },
        ]
      },
];

@NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule],
  })
  export class TutorialRoutingModule { }

注意: 使用RouterModule.forChild(routes),

路由拦截

CanActivateGuard

@Injectable()
export class CanActivateGuard implements CanActivate {
  path: ActivatedRouteSnapshot[];
  route: ActivatedRouteSnapshot;
  constructor(
    private router: Router,
    private appService: AppService
  ) { }
  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): any {
    console.log('route', route);
    console.log('state', state);

    this.appService.createTime = new Date();
    // return true;
    return true;

  }
}

CanDeactivateGuard

export interface CanComponentDeactivate {
  canDeactivate: () => Observable<boolean> | Promise<boolean> | boolean;
}

@Injectable()
export class CanDeactivateGuard implements CanDeactivate<CanComponentDeactivate> {
  constructor(
    private router: Router,
    private appService: AppService
  ) { }
  canDeactivate(
    component: CanComponentDeactivate,
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot,
    ) {
      const duration = new Date().getTime() - new Date(this.appService.createTime).getTime();
      const params = { user: 'tourist', route: state.url, duration };

      return  this.appService.addVisitRecord({data: params}).pipe(
      filter(i => i != null),
      map(data => {
        return true;
      })
    );
  }
}

相关文章

  • angular 子路由和路由拦截

    app.module.ts app-routing.module.ts CanActivateGuard, Can...

  • vue+axios 实现登录拦截权限验证

    vue+axios 前端实现登录拦截(路由拦截、http拦截) 一、路由拦截 登录拦截逻辑 第一步:路由拦截 首先...

  • vue+axios 实现登录拦截权限验证

    vue+axios 前端实现登录拦截(路由拦截、http拦截) 一、路由拦截 登录拦截逻辑第一步:路由拦截首先在定...

  • 模拟面试问题总结

    AngularJS路由实现原理 Angular路由 允许我们通过不同的URL访问不同的内容,并且Angular路由...

  • 模拟面试问题总结

    AngularJS路由实现原理 Angular路由 允许我们通过不同的URL访问不同的内容,并且Angular路由...

  • Angular的路由延迟加载

    Angular的路由延迟加载 angular的路由延迟加载大致分为两类CanActivate和CanLoad。这两...

  • angular路由跳转

    angular路由 使用路由 routerLink="/"路由出口

  • Angular Route导航

    Angular Route导航 路由基础知识 路由相关对象介绍 新建路由项目 使用angular-cli新建项目。...

  • 『ios』路由拦截器实现和一些思路

    我们带着几个问题来看这篇。1.什么是路由拦截器,路由拦截器的用处。2.路由拦截器是如何实现的。3.路由拦截器在项目...

  • vue接口拦截

    接口拦截 路由拦截 接口拦截应该指的是 http 请求拦截路由拦截是 vue 这种框架里的拦截登录拦截是一个需求,...

网友评论

      本文标题:angular 子路由和路由拦截

      本文链接:https://www.haomeiwen.com/subject/gjwgwhtx.html