我是离子新手,并且一直在尝试使用该框架。 我遇到了解雇模态的问题。
import { ModalController } from '@ionic/angular';
export class SignupPage implements OnInit { constructor(private modalCtrl: ModalController) { }
ngOnInit() {}
Close() {
this.modalCtrl.dismiss();
}
}
我期望这能关闭模式。而不是模式关闭,它只是停留在一个可以单击但不起作用的按钮上。我有什么想念的东西吗?我需要帮助...
答案 0 :(得分:0)
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>