Как заставить работать ионный модальный метод «отклонить» - PullRequest
Новая
       6

Как заставить работать ионный модальный метод «отклонить»

2 голосов
/ 02 апреля 2019

Я новичок в ионике и экспериментирую с фреймворком. У меня возникла проблема с отказом от модала. 

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

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

ngOnInit() {}

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

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

1 Ответ

1 голос
/ 02 апреля 2019

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>
...