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

有没有办法可以

在导航到路线时呼叫api
并根据对该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

Answer 2

我认为好的设计尝试这样做：

      ngOnInit(): void {
              this.ServiceOfArray.getArray(id)
            .then(u => this.showData(u));
    }
    enter code here

showData(data: Data) {
        this.data= data;
    }


Service.class
apiEndpoint: "http://localhost:52246/api";

       getArray(Id: number): Promise<SomeData> {
            var url = this.config.apiEndpoint + "/somedata/" + Id;
            return this.http.get(url)
                .map(response => response.json() as SomeData)
                .toPromise();
        }

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

2 个答案: