时间戳

首页 > 解决方案 > 离子模态调用，但未显示

angular - 离子模态调用，但未显示

问题描述

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/角度 4.1.1

标签： angularionic-frameworkionic4

解决方案

[ 解决了 ]

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

而已。解决了..！

然而，我不知道！为什么不显示模态

我只是用来引导！

推荐阅读