Question

我有以下情况：我有一个Angular应用程序（更准确地说，是一个Ionic应用程序），并希望有选择地覆盖此应用程序中的组件以创建同一应用程序的多个变体。考虑具有客户特定分支的标准应用程序。

在我的基础应用程序中，我声明了一个这样的组件：

@Component({
  selector: 'trip-details',
  templateUrl: 'tripDetails.html'
})
export class TripDetailsComponent {

  @Input() trip: Trip;

  constructor() {}
}

它当然包含在我的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 {}

当然，我更新了bootstrapping以使用新模块：

platformBrowserDynamic().bootstrapModule(CustomerModule);

但是，使用此方法时，不会在任何地方使用特殊组件。

提前感谢您的帮助！

Answer 1

您可以这样做：

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

或者如果它们必须在运行时是动态的，您可以尝试：https://angular.io/guide/dynamic-component-loader

覆盖Angular 2/4组件

1 个答案: