Ionic: Как вы используете один и тот же модальный компонент на двух разных страницах?

Question

Мои модули настроены следующим образом, это конфигурация, к которой я привык из классического 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, я получаюошибка:

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

Это работает, только если у меня вообще нет CreateBookingModule и объявлен компонент непосредственно в PlaceDetailPageModule;но тогда я не могу использовать его в другом компоненте, потому что компонент не может быть объявлен дважды.

Answer 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 => {
        // ...
      });
  }
}