覆盖角度 2/4 分量

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

当然，我更新了引导程序以使用新模块：

platformBrowserDynamic().bootstrapModule(CustomerModule);

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

提前感谢您的帮助！

Answer 1

你可以做这样的事情：

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

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