离子模态总是自动打开

maf*_*tis 1 javascript ionic-framework angular

我有一个放置在模态中的表单,它应该在用户单击按钮时打开,但是一旦用户加载页面,它就会自动打开。

问题

我已将我的模态导入到我的页面module.ts文件中,它使模态自动打开。如果我从模块页面中删除它,那么我会收到此错误:

ERROR Error: Uncaught (in promise): Error: No component factory found for ContactSupplierPage. Did you add it to @NgModule.entryComponents?
Error: No component factory found for ContactSupplierPage. Did you add it to @NgModule.entryComponents?
Run Code Online (Sandbox Code Playgroud)

所以现在的问题是:

  1. 如果我将我的模态添加到模块页面,它会自动打开
  2. 如果我不将它添加到模块页面,它会出错并且无法打开。

代码

list-detail.module.ts (suppose to have modal in it)

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';
import { IonicModule } from '@ionic/angular';
import { ListDetailPage } from './list-detail.page';
import { ContactSupplierPageModule } from '../contact-supplier/contact-supplier.module'; //here

const routes: Routes = [
  {
    path: '',
    component: ListDetailPage
  }
];

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    ContactSupplierPageModule, //here
    ReactiveFormsModule,
    IonicModule,
    RouterModule.forChild(routes)
  ],
  declarations: [ListDetailPage]
})
export class ListDetailPageModule {}
Run Code Online (Sandbox Code Playgroud)

list-detail.page.ts

async contactSupplier() {
    const modal = await this.modalCtrl.create({
      component: ContactSupplierPage
    });
    return await modal.present();
}
Run Code Online (Sandbox Code Playgroud)

list-detail.html

<ion-footer (click)="contactSupplier()">
  <ion-toolbar>
    <ion-title>Contact Supplier</ion-title>
  </ion-toolbar>
</ion-footer>
Run Code Online (Sandbox Code Playgroud)

任何的想法?

maf*_*tis 5

解决了

我不得不在app.module.ts文件中添加我的模态模块而不是我的页面模块文件。

现在工作得很好。

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    BrowserModule,
    IonicModule.forRoot(),
    AppRoutingModule,
    ContactSupplierPageModule, // here
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule,
    CommonModule
  ],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}
Run Code Online (Sandbox Code Playgroud)

希望它能帮助别人。