Блог

Я новичок в ionic и экспериментировал с фреймворком. Я столкнулся с проблемой при отклонении модального.

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

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

ngOnInit() {}

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

Я ожидал, что это закроет модальный. Вместо модального закрытия он просто остается там с кнопкой, которая доступна для нажатия, но не работает. Есть ли что-нибудь, чего мне не хватает или что нужно исключить? Мне нужна помощь…

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>