Question

使用Ng 5.1.3，CLI 1.6.3，这是本文截至目前为止最新的。

目前我被困住了。我有一种情况，我正在加载一个页面，需要不同的路由器足迹移动与桌面视图。此视图当前处于延迟加载的模块中。我创建了两个不同的着陆视图页面，并认为我可以创建两个不同的路由配置，同时我的路由器根据屏幕宽度在路由配置之间切换。这适用于急切加载的组件，但不适用于模块中的延迟加载组件。关闭路由器的resetConfig命令要求将该路由中使用的那些组件设置为条目组件，但路由器不会在其惰性模块的entrycomponent部分中看到放置的惰性组件。这是我正在进行的内容示例代码：

https://embed.plnkr.co/CA96WEk5qgJwghEbyBF8/

我让plunker处于工作状态，但是当尝试在惰性模块中使用与eager组件相同的分辨率路由切换时，会出现问题。在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;
  }
}

路由模块代码

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

这适用于主应用程序路由，但惰性模块是相同的。只需抓住热切的组件并复制它们就可以成为懒惰模块的一部分。以上内容适用于作为主模块一部分的热切组件，但不适用于惰性模块。

如果我查看componentfactoryresolver对象，我的懒惰模块的条目组件最终会成为该对象中的子数组，而不是主要父数组的一部分。我有点难过，如何使用resetConfig来使用懒惰模块中的入口组件而不是主应用程序模块。有什么建议吗？

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

0 个答案: