角度2+：ルーティングAPI

Question

からの応答に基づいて、私は

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

次今

product/1を言っていると言う - DigitalMediaComponent

product/2によってレンダリングされた映画である - と言っていますテレビby ProductDetailsComponent

product/3 - 洗濯機/乾燥機バンドルで、BundleComponent

product/4 - マットレスのコレクションがあり、これが含まれ、マットレスは、フレームは、カバーは、シートは、枕は、一度

product/5を購入する前に、物事、色、サイズ、スレッド数と、そのような数を選択することができます - これは、タイヤを言う自動車の製品なので、これはレンダリングするTireComponent - これは、年/メイク/モデル/トリムの選択、および多くの他のカスタマイズと購入する前に、fitmentmoduleが必要です

と続きます。

明らかに、これらのいくつかの間で再利用されるいくつかのコンポーネントがありますが、全体的には大きく異なります。だから私はこれらのコンポーネントを含むjavascriptファイル（とCSS）を怠け者（または怠惰なダウンロード）にしたい、タイヤを表示するときに私はMoviePreviewComponentを必要としない。

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

は私が

1. 呼び出すことができる方法はありますように、私は、ルートと部品の間に1対1の関係の非常に単純なケースについてのすべての話を多くの例を読み、彼らしています
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]。 idsとコンポーネントのマッピングを作成するだけで済みます。記事[https://embed.plnkr.co/?show=preview]]に示されているこの大草原をチェックしてください。私は良いデザインのためだと思う

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