在alert ionic 4上传递html模板和图标

在 Ionic 4 中，要实现传递 HTML 模板和图标的弹窗(alert)，你可以按照以下步骤进行：

创建一个自定义的组件来实现弹窗。可以使用 Ionic 的弹窗组件 ion-alert 来进行扩展，添加自定义的 HTML 模板和图标。
在组件中，可以使用 template 属性来指定 HTML 模板。你可以通过这个属性传递一个包含所需 HTML 内容的字符串。
同样，在组件中，可以使用 cssClass 属性来指定图标的样式。你可以通过自定义的 CSS 类来实现不同的图标样式。
接下来，你可以在需要显示弹窗的地方调用这个自定义的组件。可以通过使用 alertController（Ionic 提供的一个服务）来创建弹窗实例。
在调用 create() 方法创建弹窗实例时，可以通过 componentProps 属性将 HTML 模板和图标传递给自定义组件。

下面是一个示例代码，演示了如何在 Ionic 4 中实现传递 HTML 模板和图标的弹窗：

import { Component } from '@angular/core';
import { AlertController } from '@ionic/angular';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  constructor(private alertController: AlertController) {}

  async presentCustomAlert() {
    const alert = await this.alertController.create({
      header: 'Custom Alert',
      subHeader: 'This is a custom alert with HTML template and icon',
      component: CustomAlertComponent,
      componentProps: {
        template: '<p>This is a custom HTML template</p>',
        iconClass: 'custom-icon'
      }
    });

    await alert.present();
  }
}

@Component({
  template: `
    <ion-alert>
      <div [innerHTML]="template"></div>
      <ion-icon class="{{ iconClass }}"></ion-icon>
    </ion-alert>
  `
})
export class CustomAlertComponent {
  template: string;
  iconClass: string;

  constructor() {
    this.template = '';
    this.iconClass = '';
  }
}

在上面的代码中，我们创建了一个自定义的组件 CustomAlertComponent，用于实现弹窗中的 HTML 模板和图标。在组件的模板中，我们使用了 ion-alert 组件，使用了 innerHTML 属性来显示传递的 HTML 模板，并使用了自定义的 CSS 类 iconClass 来指定图标的样式。

在 HomePage 组件中，我们使用 alertController 创建了一个弹窗实例，并通过 componentProps 属性传递了 HTML 模板和图标的相关信息。

需要注意的是，以上示例中的代码是基于 Ionic 4 版本的，如果你使用的是 Ionic 5 或其他版本，代码可能会有所不同。

推荐的腾讯云相关产品和产品介绍链接地址：