如何使ionic模态对话框的“dismiss”方法正常工作

Question

如何使ionic模态对话框的“dismiss”方法正常工作

3

我是ionic的新手，一直在尝试这个框架。我遇到了一个解除模态框的问题。

import { ModalController } from '@ionic/angular';

export class SignupPage implements OnInit { constructor(private modalCtrl: ModalController) { }

ngOnInit() {}

  Close() { 
   this.modalCtrl.dismiss(); 
  } 
}

我本以为这会关闭弹出框。但是弹出框并没有关闭，只是留下了一个可点击但无法使用的按钮。我是否漏掉了什么或需要排除一些东西？我需要帮助……

- Nyamsters

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Kishan Oza · Accepted Answer

1) 我将模态框创建为一个页面 2) app.module.ts

I have added in the entryComponent the page of the modal and in turn the module to the      imports

import { ModalPage } from './pages/modal/modal.page';
import { ModalPageModule } from './pages/modal/modal.module';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [ModalPage],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule,
    ModalPageModule
  ],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

3) app-routin.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'home', loadChildren: './home/home.module#HomePageModule' },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }
only the real pages should remain, for example home which is the home page

4) home.page.ts

function to open the modal

import {Component} from '@angular/core';
import { ModalController } from '@ionic/angular';

import { ModalPage } from './../pages/modal/modal.page';
@Component({
    selector: 'app-home',
    templateUrl: 'home.page.html',
    styleUrls: ['home.page.scss'],
})
export class HomePage {

    constructor(private modalController: ModalController) {}

    async abrirModal() {
        const modal = await this.modalController.create({
            component: ModalPage
        });

        modal.present();
    }

}

5) home.page.html

<ion-button color="primary" expand="full" (click)="abrirModal()">Abrir modal  </ion-button>

6) 在modal.page.ts中实现关闭或取消模态框的功能。

import { ModalController } from '@ionic/angular';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-modal',
  templateUrl: './modal.page.html',
  styleUrls: ['./modal.page.scss'],
})
export class ModalPage implements OnInit {

  constructor(private modalController: ModalController) { }

  ngOnInit() {
  }

  close() {
    this.modalController.dismiss();
  }

}

最初的回答：7) modal.page.html

<ion-button color="primary" (click)="close()">Close  </ion-button>