Angular 2+:基于api响应的路由

Question

说我有以下内容

const routes = [
  { 
    path: 'product/:id',
    component: ProductDetailsComponent,
  }
  { 
    path: 'search',
    component: SearchResultsComponent,
  }
]

现在说

product/1 - 是一部由电影呈现的电影 DigitalMediaComponent

product/2 - 是说电视 ProductDetailsComponent

product/3 - 是一个洗衣机/烘干机捆绑,呈现为 BundleComponent

product/4 - 是一个床垫系列,这包括,床垫,框架,封面,床单,枕头,一旦可以选择一些东西,颜色,尺寸,线程数等购买之前

product/5- 是一种汽车产品说轮胎,所以这使得TireComponent- 这需要一个配件模块,年份/品牌/型号/装饰选择,以及许多其他定制,然后才能购买

而这样的例子不胜枚举.

显然,有些组件在其中一些组件之间重复使用,但总的来说它们之间存在很大差异.所以我想懒加载(或懒惰下载)包含这些组件的javascript文件(和css),我不需要MoviePreviewComponent显示轮胎时.

我已经阅读了很多例子,他们都谈到了一个非常简单的路由和组件之间的一对一关系的情况,比如

{ path: 'product/:id', loadChildren: 'product/ProductDetailsComponent' }
or
{ path: 'product/:id', loadChildren: () => System.import('./product/ProductDetailsComponent').then(mod => mod.default) }

我有办法吗？

1. 在导航到路线时呼叫api
2. 并根据对api的响应System.import('...')用于懒惰下载模块

我不想导航到插页式广告组件并从那里加载,因为当用户点击搜索结果中的产品时(或整个网站中的任何其他促销横幅,可能会或可能不会使用角度2构建),以及如果页面加载需要一些,他们可以按下esc并单击其他内容.这是正常的浏览器行为,我不想失去它

即使我最终得到插页式组件,我将如何加载动态模块呢？

ngOnInit() {
  let id = this.route.snapshot.params['id'];
  fetch('/my/api/' + id)
    .then(response => response.json())
    .then(data => {
      System.import('./page/' + data.componentType)
        .then(
          // then what do I do to register this module with Angular
          // and replace this in the <router-outlet>
    })

}

Answer 1

看看这是否有帮助：您可以按照此链接创建动态组件加载器[ https://angular.io/guide/dynamic-component-loader]。您只需创建 id 和组件的映射即可。查看文章[ https://embed.plnkr.co/?show=preview]中给出的这个plunkr 。