在alert Ionic 4中添加自定义组件标记

ionic generate component CustomComponent

<div class="custom-marker">
  Custom Marker
</div>

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-custom-component',
  templateUrl: './custom-component.component.html',
  styleUrls: ['./custom-component.component.scss'],
})
export class CustomComponent implements OnInit {

  constructor() { }

  ngOnInit() {
    // 执行一些初始化操作
  }

}

import { Component } from '@angular/core';
import { AlertController } from '@ionic/angular';
import { CustomComponent } from '../custom-component/custom-component.component';

@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({
      component: CustomComponent,
      header: 'Custom Alert',
      message: 'This is a custom alert with a custom component marker.',
      buttons: ['OK']
    });

    await alert.present();
  }

}

<ion-button (click)="presentCustomAlert()">显示自定义 Alert</ion-button>