Angular 5：具有动态路由的惰性模块中的入口组件

使用Ng 5.1.3、CLI 1.6.3，这是截至本文的最新版本

现在我被卡住了。我有一种情况，我加载的页面需要不同的路由器占用空间，用于移动视图和桌面视图。此视图当前位于延迟加载的模块中。我创建了两个不同的登录视图页面，并认为我可以创建两个不同的路由配置，同时让我的路由器根据屏幕宽度在路由配置之间切换。这适用于急切加载的组件，但不适用于模块中惰性加载的组件。路由器的resetConfig命令要求将该路由中使用的组件设置为入口组件，但路由器没有看到惰性组件放置在其惰性模块的entrycomponent部分。以下是我正在进行的plunker示例代码：

我让plunker处于工作状态，但当尝试在惰性模块中使用与急切组件相同的分辨率路由切换时，就会出现问题。在lazy/lazy.module.ts文件中，将从lazyRouting对象导入的路由改为LazyRoutingModule。由于没有将惰性组件作为NgMoule.entryComponents对象的一部分而生成错误

下面是相关部分的代码片段

解析服务代码：

import { Injectable, NgZone } from '@angular/core';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';

@Injectable()
export class ResolutionService {
  constructor(ngZone: NgZone) {
    // On resize
    window.onresize = (e) => {
      ngZone.run(() => {
        this.width.next(window.innerWidth);
      });
    };
  }

  width: BehaviorSubject<number> = new BehaviorSubject<number>(window.innerWidth);

  getWidth() {
    return window.innerWidth;
  }
}

从'@angular/core'导入{Injectable，NgZone}；
从'rxjs/BehaviorSubject'导入{BehaviorSubject}；
@可注射（）
导出类解析服务{
建造商（ngZone:ngZone）{
//关于调整大小
window.onresize=（e）=>{
ngZone.run（（）=>{
this.width.next（window.innerWidth）；
});
};
}
宽度：BehaviorSubject=新的BehaviorSubject（window.innerWidth）；
getWidth（）{
返回窗口.innerWidth；
}
}

路由模块代码

import { NgModule } from '@angular/core';
import { Routes, Router, RouterModule } from '@angular/router';

import { ListDesktopComponent } from './components/index';
import { ListMobileComponent } from './components/index';
import { ValueDesktopComponent } from './components/index';
import { ValueMobileComponent } from './components/index';

import { ResolutionService } from './shared/index';

export const appDesktopRoutes: Routes = [
  {
    path: '',
    component: ListDesktopComponent,
    children: [
      {
        path: 'item/:id',
        component: ValueDesktopComponent
      }
    ]
  },
  { path: 'lazy',
    loadChildren: './app/lazy/lazy.module#LazyModule',
  }
];

export const appMobileRoutes: Routes = [
  {
    path: '',
    component: ListMobileComponent
  },
  {
    path: 'item/:id',
    component: ValueMobileComponent
  },
  { path: 'lazy',
    loadChildren: './app/lazy/lazy.module#LazyModule',
  }
];

@NgModule({
  imports: [
    RouterModule.forRoot([])
  ],
  exports: [
    RouterModule
  ]
})
export class AppRoutingModule {
  private previousWidth: number;

  constructor(
    private router: Router,
    private resolutionService: ResolutionService
  ) {
    this.previousWidth = -999;

    resolutionService.width.subscribe(width => {
      this.doReRoute(width);
    });
  }

  doReRoute(width: number) {
    const MOBILE_WIDTH = 500; // magic number resolution breakpoint
    if (width !== this.previousWidth) {
      if (width < MOBILE_WIDTH && (this.previousWidth >= MOBILE_WIDTH || this.previousWidth === -999)) {
        this.router.resetConfig(appMobileRoutes);
        this.router.navigate([]);
      } else if (width >= MOBILE_WIDTH && this.previousWidth < MOBILE_WIDTH) {
        this.router.resetConfig(appDesktopRoutes);
        this.router.navigate([]);
      }
      this.previousWidth = width;
    }
  }
}

从'@angular/core'导入{NgModule}；
从'@angular/Router'导入{Routes，Router，RouterModule}；
从“./components/index”导入{ListDesktopComponent}；
从“./components/index”导入{ListMobileComponent}；
从“./components/index”导入{ValueDesktopComponent}；
从“./components/index”导入{ValueMobileComponent}；
从“./shared/index”导入{ResolutionService}；
导出常量appDesktopRoutes:路由=[
{
路径：“”，
组件：ListDesktopComponent，
儿童：[
{
路径：'item/：id'，
组件：ValueDesktopComponent
}
]
},
{path:'懒惰'，
loadChildren:“./app/lazy/lazy.module#LazyModule”，
}
];
导出常量appMobileRoutes:路由=[
{
路径：“”，
组件：ListMobileComponent
},
{
路径：'item/：id'，
组件：ValueMobileComponent
},
{path:'懒惰'，
loadChildren:“./app/lazy/lazy.module#LazyModule”，
}
];
@NGD模块({
进口：[
RouterModule.forRoot（[]）
],
出口：[
路由模块
]
})
导出类批准模块{
private-previousWidth：数字；
建造师(
专用路由器：路由器，
私人解决服务：解决服务
) {
this.previousWidth=-999；
resolutionService.width.subscribe（宽度=>{
本图为多罗特（宽度）；
});
}
doReRoute（宽度：编号）{
const MOBILE_WIDTH=500；//幻数解析断点
if（宽度！==此.previousWidth）{
如果（宽度=MOBILE_width| | this.previousWidth==-999））{
this.router.resetConfig（appMobileRoutes）；
这个.router.navigate（[]）；
}else if（width>=MOBILE\u width&&this.previousWidth

这是用于主应用程序路由的，但懒惰模块是相同的。只需要将渴望的组件复制成懒惰模块的一部分。上述方法适用于作为主模块一部分的急切组件，但不适用于惰性模块

---

如果我查看componentfactoryresolver对象，我的惰性模块的条目组件最终将作为该对象中的子数组，而不是主父数组的一部分。对于如何使用resetConfig让路由器使用lazy模块中的条目组件而不是主应用程序模块，我有点困惑。有什么建议吗？

你能在问题中包含代码而不是作为链接吗？编辑了问题代码的主要部分，这些部分存在plunker示例中的问题。我无法找到我真正喜欢的合适解决方案。最后，我不得不使用移动和桌面登录页面设置，并根据分辨率在页面之间交换路由器URL。虽然不雅致，但现在还可以用。希望angular团队在将来为延迟加载的模块添加动态路由更改，因为据我所知，现在这种方式不起作用。