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: `
      <div id=\'divclick\' (click)="onClick()">
      <span>
        <img style=\'max-width:20%;margin-left:2%;\' src=\'assets/images/backge.png\'>
      </span>
      <span ><img id=\'alert-1-msg\' (click)=\'testtab()\' style=\'max-width:15%; margin:2%; float:right\' src=\'assets/home/加_.png\'>
      </span>
      <input id="alertPp" type="text" style=\'max-width:15%;text-align:center;margin-top:5%; float:right;\' [(ngModel)]="test1">
      </input>
       <span > <img (click)="testtab()" style=\'max-width:15%;margin:2%; float:right\' src=\'assets/home/减_.png\'>
       </span >
       </div>'
       '<div><img style=\'max-width:24%;margin-top:5%;\' src=\'assets/home/money.png\'>
       <p style=\'text-align:center;margin-top:14%; float:right; text-decoration: underline;margin-right:17%\'>2000 </p></div>
      `,
      // 此注释和上面一致，只是用反斜杠表示
      // '<div id=\'divclick\' (click)="onClick()"><span><img style=\'max-width:20%;margin-left:2%;\' src=\'assets/images/backge.png\'></span>  <span ><img id=\'alert-1-msg\' (click)=\'testtab()\' style=\'max-width:15%; margin:2%; float:right\' src=\'assets/home/加_.png\'></span>   <input id=\'alertPp\' style=\'max-width:15%;text-align:center;margin-top:5%; float:right;\' [(ngModel)]=\'test1\'></input>  <span > <img (click)="testtab()" style=\'max-width:15%;margin:2%; float:right\' src=\'assets/home/减_.png\'> </span > </div>' + '<div><img style=\'max-width:24%;margin-top:5%;\' src=\'assets/home/money.png\'> <p style=\'text-align:center;margin-top:14%; float:right; text-decoration: underline;margin-right:17%\'>2000 </p></div> ',
      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: `
      <div id=\'divclick\' (click)="onClick()">
      <span>
        <img style=\'max-width:20%;margin-left:2%;\' src=\'assets/images/backge.png\'>
      </span>
      <span ><img id=\'alert-1-msg\' (click)=\'testtab()\' style=\'max-width:15%; margin:2%; float:right\' src=\'assets/home/加_.png\'>
      </span>
      <input id="alertPp" type="text" style=\'max-width:15%;text-align:center;margin-top:5%; float:right;\' [(ngModel)]="test1">
      </input>
       <span > <img (click)="testtab()" style=\'max-width:15%;margin:2%; float:right\' src=\'assets/home/减_.png\'>
       </span >
       </div>
       '<div><img style=\'max-width:24%;margin-top:5%;\' src=\'assets/home/money.png\'>
       <p style=\'text-align:center;margin-top:14%; float:right; text-decoration: underline;margin-right:17%\'>2000 </p></div>
      `,
      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再次执行也可以，但是要想数据绑定的话暂时是实现 不了的！