在离子警报中显示 svg答案

【问题标题】：Display svg within ionic alert在离子警报中显示 svg
【发布时间】：2020-08-05 09:34:23
【问题描述】：

我正在尝试自定义ionic alerts，在消息参数中包含<svg>，因为Ionic 声明message：

要在警报中显示的主要消息。 message 可以接受纯文本或 HTML 作为字符串。要显示通常为 HTML 保留的字符，必须对其进行转义。例如<Ionic> 将变为&lt;Ionic&gt；

但是，当我尝试以下操作时，没有显示图像：

const alert = await this.alertController.create({
  header: params.title,
  message: `
    <svg width="27px" height="82px" viewBox="0 0 27 82" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <title>np_exclamation-mark_920809_FDFF25</title>
      <desc>Created with Sketch.</desc>
      <defs></defs>
      <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
          <g id="iPad-Portrait" transform="translate(-371.000000, -1116.000000)" fill-rule="nonzero" fill="#FDFF25">
              <g id="np_exclamation-mark_920809_FDFF25" transform="translate(371.000000, 1116.000000)">
                  <path d="M16.648,63.301 C16.0262694,63.0291894 15.3701293,62.8441243 14.698,62.751 C14.1380094,62.6473705 13.5694896,62.5968131 13,62.6 C12.433,62.6 11.882,62.648 11.351,62.75 C10.677918,62.8431906 10.0207959,63.028248 9.398,63.3 C8.332,63.698 7.367,64.35 6.5,65.25 C4.699,67.081 3.8,69.284 3.8,71.85 C3.8,74.417 4.699,76.6 6.5,78.398 C8.3,80.198 10.465,81.101 13,81.101 C15.566,81.101 17.75,80.198 19.55,78.398 C21.351,76.601 22.25,74.418 22.25,71.851 C22.25,69.284 21.351,67.081 19.55,65.249 C18.683,64.351 17.715,63.699 16.648,63.3 L16.648,63.301 Z M25.898,13.148 C26.933,4.418 22.633,0.082 13,0.148 C3.399,0.183 -0.852,4.448 0.25,12.949 L6.852,58.351 L19.3,58.351 L25.898,13.148 Z" id="Shape"></path>
              </g>
          </g>
      </g>
    </svg>`,
  buttons: customButtons
});
alert.present();

它是这样的：

当我添加svg 的转义版本时，它会将其加载为文本，而不是图像！

【问题讨论】：

您试图在警报中插入的不是文本（或消息），而是 innerHTML。我认为这是不可能的，但如果有任何机会，你需要对其进行消毒以使其工作。如果您找到注入innerHTML 的方法，只是一个提示。如果我是你，我会更改为模态（ModalController）并自己创建整个警报。它会比破解 AlertController 更快（同样，如果这可能的话）。
@elnezah 所以我首先尝试了，但由于某种原因我无法修改模态的大小。太大了
然后尝试让模态框的背景透明并绘制一个较小的 div 来作为警报。我这样做是在我的variables.css（具有透明背景）中创建一个类，然后在我创建模态时将其应用于我的模态：modalController.create({cssClass: 'transparent-modal'})。
@elnezah 好主意！我试试看
如果对你有帮助，别忘了点赞 ;-)

标签： ionic-framework ionic4

【解决方案1】：

您可以使用 Angular 将组件动态注入到任意 DOM 插槽中。

这是我刚刚构建的一个示例，用于在对话框按钮旁边显示倒计时：

等到您的对话框出现，然后......

   this.componentInjector.inject(".alert-wrapper .alert-button:nth-child(2)", CountdownComponent, instance => {
                instance.text = options.okText;
                instance.seconds = options.confirmAfterSeconds;
            });

有

@Injectable()
export class ComponentInjector {

constructor(
    private componentFactoryResolver: ComponentFactoryResolver,
    private injector: Injector,
    private app: ApplicationRef
) {

}

async inject<T>(slotSelector: string, componentConstructor: new (...args) => T, configureInstance: (instance: T) => any): Promise<void> {

    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(componentConstructor);

    const slot = document.querySelector(slotSelector);

    const ref = componentFactory.create(this.injector, [], slot);

    configureInstance(ref.instance as T);

    this.app.attachView(ref.hostView);

}

}

它尚未完善，但似乎可以工作。

【讨论】：

【解决方案2】：

我认为 Ionic 警报不支持图像。您可能必须使用 Modal 或 Popover 来显示媒体。或者可能使用 css 更改背景作为警报并调整大小和位置 - 可能会变得混乱。据我所知，警报并不意味着保存图像。你可以尝试在他们的 Git 上请求它，也许他们会形成一种解决方法。

【讨论】：