angular - 如何使 ionic modal 'dismiss' 方法起作用

Question

我是 ionic 新手，一直在尝试该框架。我遇到了关闭模式的问题。

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

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

ngOnInit() {}

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

我期待这会关闭模式。它不是模态关闭，而是停留在那里，带有一个可点击但不起作用的按钮。有什么我遗漏或需要遗漏的吗？我需要帮助...

Answer 1

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>