Question

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调试控制台中打印此日志（“适合模式页面”）但不显示模式显示

<ion-item (click)="present();">

在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

Answer 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

希望这会有所帮助！

Answer 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": [
            ]

就是这样。解决了..！

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

我只是用来引导!!

离子模态，但不显示

2 个答案: