ionic如何在弹框写HTML

首先我们先学习下如何跳转：

//  此方法中写了几个参数，则对应下面方法需要几个参数，我们在html调取此方法（exitSystem）即可使用

  exitSystem() {
    this.presentAlertExitSystem(this.alertController, '', this.router, '/home-main');
  }
  //  此方法对应上面的参数
  async presentAlertExitSystem(
    alertController: AlertController,
    message: string,
    router?: Router,
    url?: string
  ) {}

我们只做弹框，需要反斜杠来实现：

/**
   * @description: 跳转兑换页
   * @param {type} 无
   * @return: 无
   * @author: 张三
   */
  exitSystem() {
    this.presentAlertExitSystem(this.alertController, '', this.router, '/home-main');
  }

  async presentAlertExitSystem(
    alertController: AlertController,
    message: string,
    router?: Router,
    url?: string
  ) {
    const alert = await alertController.create({
      header: '',
      cssClass: 'tankuang',
      message: `
      

      
        
      
      
      
      
      
        
       
       
'
       '

       
2000 
      `,
      // 此注释和上面一致，只是用反斜杠表示
      // '
          
' + '
 
2000 
 ',
      buttons: [
        {
          text: '兑换',
          // cssClass: 'style=\'margin-left:40%\'',
          handler: () => {
            if (url !== null && url !== undefined) {
              router.navigateByUrl(url);
              localStorage.clear();
              // localStorage.removeItem('userCode');
            } else {
              // console.log('Confirm Okay');
            }
          }
        }
      ]

    });
  }

css样式

/deep/ .tankuang{
  // .alert-message {
  //   max-width: 15%;
  //   max-height: 15%;
  // }
  /deep/ .alert-button-group{
    justify-content: center;
  }
  /deep/ .alert-button-inner{
    font-size: 20px !important;
  }
  
}

效果如下：

当前我们在ts里面画的页面是执行不了事件或者绑定的，只能是渲染页面，我们在这里再次执行click事件，请看我们在最后添加的方法

import {Renderer2 } from '@angular/core';

  // 声明组件
  constructor(
    public renderer2: Renderer2
  ) {}

  exitSystem() {
    this.presentAlertExitSystem(this.alertController, '', this.router, '/home-main');
  }

  async presentAlertExitSystem(
    alertController: AlertController,
    message: string,
    router?: Router,
    url?: string
  ) {
    const alert = await alertController.create({
      header: '',
      cssClass: 'tankuang',
      message: `
      

      
        
      
      
      
      
      
        
       
       
       '

       
2000 
      `,
      buttons: [
        {
          text: '兑换',
          // cssClass: 'style=\'margin-left:40%\'',
          handler: () => {
            if (url !== null && url !== undefined) {
              router.navigateByUrl(url);
              localStorage.clear();
              // localStorage.removeItem('userCode');
            } else {
              // console.log('Confirm Okay');
            }
          }
        }
      ]

    });
    await alert.present();
    this.div = document.getElementById('alert-1-msg');  // 获取要执行的click中的Id
    this.renderer2.listen(this.div, 'click', () => {
      console.log(22222);  // 执行内容。
    });
  }

注意：弹框中是 用来显示的 ，所有我们可以添加图片，写事件只能写到button里面 ，或者像我们这样获取Id再次执行也可以，但是要想数据绑定的话暂时是实现 不了的！