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

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

1. 创建一个自定义的组件来实现弹窗。可以使用 Ionic 的弹窗组件 ion-alert 来进行扩展，添加自定义的 HTML 模板和图标。
2. 在组件中，可以使用 template 属性来指定 HTML 模板。你可以通过这个属性传递一个包含所需 HTML 内容的字符串。
3. 同样，在组件中，可以使用 cssClass 属性来指定图标的样式。你可以通过自定义的 CSS 类来实现不同的图标样式。
4. 接下来，你可以在需要显示弹窗的地方调用这个自定义的组件。可以通过使用 alertController（Ionic 提供的一个服务）来创建弹窗实例。
5. 在调用 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 或其他版本，代码可能会有所不同。

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

• 云服务器（CVM）：提供弹性计算服务，可随时创建、部署和扩展应用。了解更多：云服务器（CVM）
• 云函数（SCF）：无需管理服务器，实现函数级别的弹性扩容，自动处理流量等。了解更多：云函数（SCF）
• 云数据库 MySQL 版（CDB）：稳定可靠的关系型数据库，提供高性能、可扩展的云端数据存储服务。了解更多：云数据库 MySQL 版（CDB）
• 腾讯云存储（COS）：安全、稳定、低成本的云端存储服务，可存储和处理大规模的数据。了解更多：腾讯云存储（COS）
• 人工智能服务：腾讯云提供了多个人工智能相关的服务，如人脸识别、自然语言处理等。了解更多：人工智能服务
• 物联网套件（IoT Suite）：提供完善的物联网云平台服务，帮助用户轻松构建物联网应用。了解更多：物联网套件（IoT Suite）
• 腾讯云区块链服务（Tencent Blockchain）：帮助用户快速构建和管理区块链网络，提供安全可信的区块链服务。了解更多：腾讯云区块链服务
• 腾讯云游戏多媒体引擎（GME）：提供实时语音、语音识别等多媒体处理服务，适用于游戏等场景。了解更多：腾讯云游戏多媒体引擎（GME）

请注意，以上推荐的腾讯云产品仅供参考，具体选择应根据项目需求和实际情况进行评估和决策。