离子模态调用，但未显示答案

【问题标题】：ion-modal called, but not showing离子模态调用，但未显示
【发布时间】：2019-03-21 08:52:43
【问题描述】：

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

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

  constructor() { }

  ngOnInit() {
    console.log(`fit modal page`);
  }

}

在 chrome 调试控制台中打印了这个日志（'fit modal page'）但是，不显示模态显示

&lt;ion-item (click)="present();"&gt;

在 HTML 中

import { Component, OnInit } from '@angular/core';
import { AgentFitService } from 'src/app/_common/services/agent-fit.service';
import { FitList } from 'src/app/_common/models/fit-list';
import { ModalController } from '@ionic/angular';
import { FitModalPage } from 'src/app/_modal/fit-modal/fit-modal.page';



@Component({
  selector: 'app-fit-info',
  templateUrl: './fit-info.component.html',
  styleUrls: ['./fit-info.component.scss']
})
export class FitInfoComponent implements OnInit {
  fitList: FitList = new FitList;

  constructor(private agentFit: AgentFitService, private modalCtrl: ModalController) {
    this.search('');
  }

  ngOnInit() {
  }

  search = async( order_id: string ) => {
    const temp = await this.agentFit.getList(order_id);
    this.fitList = <FitList>temp;
    console.log( `fit-info components getList[${temp}]` );
  }

  async present() {
    const modal = await this.modalCtrl.create({
      component: FitModalPage
    });
    await modal.present();
  }

}

我称为模态的组件

和..模块

我找不到错误信息。我的控制台很干净..

为什么不显示模态弹窗？

但是，打印到“适合模式页面”日志..

@ionic/angular 4.1.1

【问题讨论】：

你应该返回 modal.present();详情请查看答案
你在app.module.ts中导入了FitModalPageModule吗？
所以，我遇到了这个错误消息类型 FitModalPage 是 2 个模块声明的一部分：SettingPageModule 和 FitModalPageModule！请考虑将 FitModalPage 移至导入 SettingPageModule 和 FitModalPageModule 的更高模块。您还可以创建一个新的 NgModule，它导出并包含 FitModalPage，然后在 SettingPageModule 和 FitModalPageModule 中导入该 NgModule。

标签： angular ionic-framework ionic4

【解决方案1】：

根据文档，您需要像 return await modal.present(); 一样返回以显示模式。

import { Component } from '@angular/core';
import { ModalController } from '@ionic/angular';
import { ModalPage } from '../modal/modal.page';
@Component({
  selector: 'modal-example',
  templateUrl: 'modal-example.html',
  styleUrls: ['./modal-example.css']
})
export class ModalExample {
  constructor(public modalController: ModalController) {}

  async presentModal() {
    const modal = await this.modalController.create({
      component: ModalPage,
      componentProps: { value: 123 }
    });
    return await modal.present();
  }
}

Official documentation link

希望这会有所帮助！

【讨论】：

【解决方案2】：

[已解决]

# angular.json
"styles": [
              {
                "input": "src/theme/variables.scss"
              },
              {
                "input": "src/global.scss"
              },
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "node_modules/@fortawesome/fontawesome-free/css/all.css"
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.min.js",
              "node_modules/popper.js/dist/umd/popper.min.js",
              "node_modules/bootstrap/dist/js/bootstrap.min.js"
            ]

我习惯于引导..

angular.json 中的样式

所以，没有显示模态...

然后删除引导 css 行..

# angular.json
"styles": [
              {
                "input": "src/theme/variables.scss"
              },
              {
                "input": "src/global.scss"
              }
            ],
            "scripts": [
            ]

就是这样。解决了..！

但是，我不知道！为什么不显示模态

我只是用来引导！！

【讨论】：