Ionic：你如何在两个不同的页面上使用相同的 Modal 组件？答案

【问题标题】：Ionic: How do you use the same Modal-component on two different pages?Ionic：你如何在两个不同的页面上使用相同的 Modal 组件？
【发布时间】：2019-09-25 02:49:19
【问题描述】：

我的模块是这样设置的，这是我习惯于经典 Angular 的配置：

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild(routes),
    CreateBookingModule
  ],
  declarations: [PlaceDetailPage],
  entryComponents: [CreateBookingComponent]
})
export class PlaceDetailPageModule {}

@NgModule({
  declarations: [CreateBookingComponent],
  exports: [CreateBookingComponent],
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
  ]
})
export class CreateBookingModule { }

不幸的是，当在 PlaceDetailPage 中并激活应该呈现 CreateBookingComponent 的 Modal 时，我收到错误：

Error: No component factory found for CreateBookingComponent. Did you add it to @NgModule.entryComponents?

只有在我根本没有 CreateBookingModule 并直接在 PlaceDetailPageModule 中声明组件时才有效；但是我不能在另一个组件中使用它，因为一个组件不能被声明两次。

【问题讨论】：

如果我没记错的话必须加前。 app.module.ts 像这样：declarations: [CreateBookingComponent], 和 entryComponents: [CreateBookingComponent]
创建一个通用模块，用于导出您在多个模块中需要的组件。然后只需将该通用模块导入到您需要的模块中即可。
@Beller 当我将其导入 app.module 而不是相应的 pages.module 时，出现运行时错误，即 CreateBookingComponent 不是模块的一部分
@AJT82 CreateBookingModule 是一个 SharedModule。正如我在 OP 中所说，不幸的是，共享模块方法不起作用（除非我做错了什么）
stackoverflow.com/questions/55305259/…

标签： angular ionic-framework ionic4

【解决方案1】：

我正在结束这个问题，因为问题在于它是一个全局 (providedIn: 'root') 服务，它调用 ModalController 来创建一个新的模式。

我将服务中的逻辑转换为指令。指令总是存在于父组件中，所以我认为这是确保模态问题不会逃逸到全局 DOM 中的好方法。这是指令代码：

@Directive({
  selector: '[appCreateBooking]'
})
export class CreateBookingDirective implements OnInit, OnDestroy {
  @Input() placeToBook$: Observable<Place>;
  private readonly destroy$ = new Subject();

  constructor(
    private modalCtrl: ModalController,
    private actionSheetCtrl: ActionSheetController,
  ) { }

  ngOnDestroy(): void {
    this.destroy$.next();
  }

  ngOnInit(): void {
    this.placeToBook$.pipe(takeUntil(this.destroy$), tap(place => {
      this.actionSheetCtrl.create({
        header: 'Choose an Action',
        buttons: [
          { text: 'Foo', handler: () => this.openBookingModal(place, 'foo') },
          { text: 'Bar', handler: () => this.openBookingModal(place, 'bar') },
          { text: 'Cancel', role: 'destructive' },
        ]
      }).then(el => el.present());
    })).subscribe();
  }

  private openBookingModal(place: Place, mode: PlaceDateSelectMode) {
    this.modalCtrl
      .create({
        // ...
      })
      .then(modal => {
        // ...
      });
  }
}

【讨论】：