覆蓋Angular 2/4組件

我有以下情況：我有一個Angular應用程序（更準確地說，是一個Ionic應用程序），並希望有選擇地覆蓋此應用程序中的組件以創建同一應用程序的多個變體。想想客戶特定分支的標準應用程序。覆蓋Angular 2/4組件

在我的基本應用程序，我宣佈一個組件是這樣的：

它列入我當然app.module.ts：

@NgModule({ 
    declarations: [ 
    ..., 
    TripDetailsComponent 
    ], 
    imports: [ 
    ... 
    ], 
    bootstrap: [IonicApp], 
    entryComponents: [ 
    ..., 
    TripDetailsComponent 
    ], 
    providers: [ 
    ... 
    ] 
}) 
export class AppModule {}

在我相同的專業化應用程序，我想用一個變體替換TripsDetailComponent，比如TripsDetailSpecialComponent。我如何使用Angular的DI完成這項工作？到目前爲止，我試圖爲導入原始應用程序的專用應用程序創建一個新模塊，並聲明新組件，該組件使用相同的選擇器進行註釋。

@NgModule({ 
    declarations: [ 
    TripDetailsSpecialComponent 
    ], 
    imports: [ 
    AppModule 
    ], 
    bootstrap: [IonicApp], 
    entryComponents: [ 
    TripDetailsSpecialComponent 
    ], 
    providers: [] 
}) 
export class SpecialAppModule {}

當然，我更新了自舉以使用新的模塊：

platformBrowserDynamic().bootstrapModule(CustomerModule);

然而，特殊的組件沒有在任何地方使用這種方法時使用。

在此先感謝您的幫助！

來源

2017-07-03 jpkraemer

我很抱歉，我不能看到你在做什麼試圖做到：那最終目標是什麼？如果我看到它的目的，也許我可以爲你找到一個解決方案。 – trichetriche

嘗試更改行爲，而不是組件。檢查組件模式。 –

@trichetriche這個想法是在同一個應用程序的不同變體中顯示用例特定的信息。例如，可能有一個CRM工具總是相似的，但根據客戶的職業，客戶列表應該顯示不同的信息（例如，汽車車間想要看到汽車製造和模型，醫生想看到年齡和疾病）。我的想法是爲列表單元格提供一個組件，然後替換此組件，類似於使用'{provide：Component，useClass：SpecialComponent}' – jpkraemer

你可以做這樣的事情：

{ 
    path: 'trip', 
    component: SOME_CONDITION ? TripDetailsComponent: TripDetailsSpecialComponent 
}

或者，如果他們必須要在運行時動態的，你可以試試這個：https://angular.io/guide/dynamic-component-loader

來源

2017-07-03 16:31:26 DeborahK

感謝您的建議。我大概可以用動態組件加載來製作一些東西。不幸的是，另一種解決方案無法工作，因爲它要求我知道基礎應用程序中的所有專業化。 – jpkraemer

覆蓋Angular 2/4組件

回答

相關問題