时间戳

首页 > 解决方案 > 动态重定向角度路由以加载动态模块

angular - 动态重定向角度路由以加载动态模块

问题描述

我有一个大问题。我尝试了许多没有结果的解决方案:(我想根据屏幕大小加载一个模块以查看移动视图或 Web 视图。

最接近我的目标的是该代码，但它有很多错误。

当屏幕出现时<768，我设置http://localhost:4200/了加载网络但也设置了移动设备。=(

当屏幕>768和我设置http://localhost:4200/加载网络。=)

当屏幕出现时<768，我设置http://localhost:4200/mobile/etc/etc/etc加载暴徒和网络并重定向到http://localhost:4200/mobile. =(

当屏幕>768和我设置http://localhost:4200/web/etc/etc/etc加载网络。=)

应用程序路由.module.ts

const routes: Routes = [
  {
    path: 'mobile',
    loadChildren: './view/mobile/mobile.module#MobileModule',
    canActivate: [MobGuardService],
    data: {
      preload: false
    }
  },
  {
    path: 'web',
    loadChildren: './view/web/web.module#WebModule',
    canActivate: [WebGuardService],
    data: {
      preload: false
    }
  },
  {
    path: 'error',
    loadChildren: './view/error/error.module#ErrorModule',
    data: {
      preload: false
    }
  },
  {
    path: '',
    redirectTo: window.innerWidth < 768 ? `/mobile/etc/etc/etc` : `/web/etc/etc/etc`,
    pathMatch: 'full'
  },
  {
    path: '**',
    redirectTo: window.innerWidth < 768 ? `/mobile/etc/etc/etc` : `/web/etc/etc/etc`
  }
];

mob-guard.service.ts

@Injectable({
  providedIn: 'root'
})
export class MobGuardService implements CanActivate {

  constructor(
    private router: Router
  ) {
  }

  canActivate() {
    if (window.innerWidth >= 768) {
      this.router.navigate(['/']).then();
      return false;
    }
    return true;
  }

}

web-guard.service.ts

@Injectable({
  providedIn: 'root'
})
export class WebGuardService implements CanActivate {

  constructor(
    private router: Router
  ) {
  }

  canActivate() {
    if (window.innerWidth < 768) {
      this.router.navigate(['/m/']).then();
      return false;
    }
    return true;
  }

}

我的目标很简单，但我不知道该怎么做：

  1. 当屏幕为 '<768' 并放置 localhost:4200 rediretTo 并仅加载模块 mobile
  2. 当屏幕为 '>768' 并放置 localhost:4200 rediretTo 并仅加载模块 web
  3. 当屏幕为 '<768' 并放置 localhost:4200/mobile/etc/etc/etc rediretTo 并仅加载模块 mobile
  4. 当屏幕为 '>768' 并放置 localhost:4200/ mobile /etc/etc/etc 时仅加载模块 web 但重定向到 localhost:4200/ web /etc/etc/etc
  5. 当屏幕为“<768”并放置 localhost:4200/ web /etc/etc/etc 时，仅加载模块 mob 但重定向到 localhost:4200/ mobile /etc/etc/etc

我尝试实现这样的东西，但dosent有效：

{
    path: window.innerWidth < 768 ? 'm' : 'w',
    loadChildren: window.innerWidth < 768 ? './view/mob/mob.module#MobModule' : './view/web/web.module#WebModule',
    canActivate: window.innerWidth < 768 ? [MobGuardService] : [WebGuardService],
    data: {
      preload: false
    }
  }

我希望有所帮助。谢谢你的时间。

标签： angularmoduleroutes

解决方案

您可以制作一个根组件，您可以在其中添加检查窗口内部宽度的检查，并且可以相应地重定向您的窗口视图或移动视图。

        @component({
                    selector:'app-home',
                    template:'',
                  })
        constructor(private rout:router){
        if(window.innerWidth>768){
            this.rout.navigate(['/window'])
          }else{
            this.rout.navigate(['/mobile'])
          }
      }

推荐阅读