Question

我有一个索引，当按下加载模态时，我有一个添加按钮。

index.html

<ion-header>
  <ion-toolbar>
    <ion-title>Foods</ion-title>
    <ion-buttons slot="primary">
      <ion-button color="primary" (click)="showModal()">
        <ion-icon slot="icon-only" name="add"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

这是索引页面ts

import { Component } from '@angular/core';
import { ModalController } from '@ionic/angular';
import { AddPage } from '../add/add.page';

@Component({
  selector: 'app-index',
  templateUrl: 'index.page.html',
  styleUrls: ['index.page.scss']
})
export class IndexPage {

  constructor(private modalController: ModalController) { }

  async showModal() {
    const modal = await this.modalController.create({
      component: AddPage,
    });
    await modal.present();
  }
}

因此，当用户单击showModal时，将加载模态。

现在这是我的添加模式模块。

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';

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

import { AddPage } from './add.page';

const routes: Routes = [
  {
    path: '',
    component: AddPage
  }
];

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild(routes)
  ],
  declarations: [AddPage]
})
export class AddPageModule {}

这是我的添加页面td。

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

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

  constructor() {

  }

当我转到索引页面时，模态已经加载的问题。我什至看不到索引页面。就像模式被路由到索引页面一样。

Answer 1

在您的模式html中，添加以下内容：

<ion-header>
<ion-toolbar>
<ion-title>Foods</ion-title>
<ion-buttons slot="primary">
  <ion-button color="primary" (click)="dismissModal()"> Dismiss
  </ion-button>
  </ion-buttons>
 </ion-toolbar>

然后在ts中添加以下内容：

dismissModal() {
 this.modalController.dismiss(null);
}

这将使您消除打开的模式。

如何在Ionic 4中加载模态

1 个答案: