Question

我有一个大问题。我尝试了许多没有结果的解决方案:( 我想根据屏幕大小加载模块，以查看移动视图或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时，加载网页。 =）

app-routing.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;
  }

}

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

当屏幕为“ <768”并放入localhost：4200 rediretTo并仅加载移动模块时
当屏幕为'> 768'并放置localhost：4200 rediretTo并仅加载模块Web时
当屏幕为“ <768”并放入localhost：4200 / mobile / etc / etc / etc rediretTo并仅加载mobile模块时
当屏幕为“> 768”并放置localhost：4200 / 移动 / etc / etc / etc时，仅加载模块Web，但重定向到localhost：4200 / web / etc / etc / etc
当屏幕为“ <768”并放置localhost：4200 / web / etc / etc / etc时，仅加载模块mob，但重定向至localhost：4200 / mobile / etc / etc / etc

我尝试实现类似这样的方法，但是具体可行：

{
    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
    }
  }

希望能对您有所帮助。感谢您的宝贵时间。

Answer 1

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

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

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

1 个答案: