角2+：基於從API響應路由

說我有以下角2+：基於從API響應路由

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 - 這需要fitmentmodule，與去年/品牌/型號/裝飾選擇，和許多其他自定義一個可以買到

前和這樣的例子不勝枚舉。

現在很明顯，有一些組件可以在其中一些組件之間重用，但總的來說它們在很大程度上是彼此不同的。所以我想懶加載（或懶惰下載）包含這些組件的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> 
    }) 

}

來源

2017-03-19 rrag

可以在路由模塊本身中配置它們。你什麼時候檢索數據？ – Aravind

不遵循路由模塊的含義。用戶從搜索結果中點擊產品後，必須從api中檢索數據 – rrag

這是單頁應用程序嗎？如果是這樣的廣告的東西由* ngIf條件加載布爾可觀察指標......將您的主應用程序頁面..至於模塊化部分...仍然讓我的頭部輪到那部分。 – JGFMK

看看這有助於：您可以創建以下鏈接[https://angular.io/guide/dynamic-component-loader]動態組件加載器。您只需創建您的ID和組件的映射。看看文章[https://embed.plnkr.co/?show=preview]中給出的這個plunkr。

來源

2017-09-12 17:56:34

我認爲好的設計嘗試，使這樣的：

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

來源

2017-10-12 14:43:01 user7856586

角2+：基於從API響應路由

回答

相關問題