Angular 8集成ngx-paypal时弹窗及注入HTML内按钮不渲染且无报错求助

核心问题概述 #

Angular 8 Web应用通过ngx-paypal实现PayPal支付集成，弹窗场景下PayPal按钮渲染异常，常规页面场景下组件可正常工作。

已确认的现象 #

• 弹窗基础功能运行正常，采用HTML字符串注入的方式填充弹窗内容时，嵌入在字符串内的ngx-paypal标签会被直接忽略，控制台无任何报错，PayPal按钮无法渲染
• 先后尝试3种在注入字符串中嵌入ngx-paypal的写法，均未生效
• 直接在component.html常规页面位置放置ngx-paypal组件，可正常渲染按钮，证明ngx-paypal配置、依赖加载无问题
• 尝试在弹窗容器内部直接放置ngx-paypal标签（即try4方案，为优先采用的实现方式），同样无法正常渲染

相关实现代码 #

1. component.ts 中定义用于注入弹窗的HTML字符串

this.paymentText = `
 <div style="background-color: #d8e7f3">
   <p style="width: 350px; padding-top: 10px; font-size: 16px;">
     <b>请选择支付方式</b>
   </p>
   <div style="display: flex;">
     <div style="width: 400px; padding-left: 15px;">
       <b>支付类型:</b>&nbsp;
       <input type="text" id="inputPmtType" name="inputPmtType" disabled 
         style="width: 70%; text-align: center; background-color: #eaffea;"> 
     </div>
   </div>
   <br>
   <div style="display: flex;">
     <div style="width: 400px; padding-left: 15px;">
       <b>支付金额:</b>
       <input type="text" id="inputPmtAmt" name="inputPmtAmt" disabled 
         style="width: 40%; text-align: center; background-color: #eaffea;"> 
       &nbsp;$USD&nbsp;
     </div>
   </div>
   <br>
   <div style="display: flex;">
     <div style="width: 90%; padding-left: 15px;">
       <b>支付方式:</b>&nbsp;
       <div style="text-align: center; margin-bottom: 15px;">
         <input type="image" src="../../assets/img/TMD_Media/miota_logo381.png" 
           id="miota-checkout-btn" style="width: 40px;" (click)="miotaBtnHandler()"/>
         <br><br>
         <!-- 旧实现方式：直接挂载div容器，可正常工作 -->
         <div id="paypal-checkout-btn"></div>                         
         <!-- 尝试1：字符串内直接写组件标签，未生效 -->
         <ngx-paypal [config]="payPalConfig"></ngx-paypal>              
         <!-- 尝试2：字符串拼接传配置值，未生效 -->
         <!-- <ngx-paypal [config]="` +this.payPalConfig +`"></ngx-paypal> -->
         <!-- 尝试3：字符串拼接不带属性引号传配置，未生效 -->
         <!-- <ngx-paypal [config]=` +this.payPalConfig +`></ngx-paypal> -->
       </div>
     </div>
   </div>
 </div>
`;

2. component.html 模板代码

<span style="padding-left: 10px;">
  <button saJquiDialogLauncher="#payment-dialog"
      class="btn btn-default projectbtn myHide" [(ngModel)]="paymentDialogBtn"
      #namePD1 name="paymentDialogBtn" id="paymentDialogBtn" ngDefaultControl>
  </button>
</span>

<!-- 弹窗容器 -->
<div id="payment-dialog" [saJquiDialog]="paymentDialogOptions" 
  [innerHTML]="paymentText | safeurl: 'html'">
  <!-- 尝试4：直接在弹窗容器内放置组件，未生效，为优先采用的实现方案 -->
  <!-- <ngx-paypal [config]="payPalConfig"></ngx-paypal> -->
  <div class="hr hr-12 hr-double"></div>
</div>

<!-- 正常运行验证实例：可正常渲染PayPal按钮 -->
<ngx-paypal [config]="payPalConfig"></ngx-paypal> 

3. 运行效果说明：弹窗仅正常展示表单文本、自定义图片按钮，无PayPal按钮渲染痕迹，控制台无任何报错信息。
4. saJquiDialog 自定义弹窗指令实现

import {Directive, ElementRef, OnInit, Input} from '@angular/core';
declare var $: any;

// 扩展jQuery UI Dialog的标题处理逻辑
$.widget("ui.dialog", $.extend({}, $.ui.dialog.prototype, {
  _title: function(title) {
    if (!this.options.title ) {
      title.html(" ");
    } else {
      title.html(this.options.title);
    }
  }
}));

@Directive({
  selector: '[saJquiDialog]'
})
export class JquiDialog implements OnInit {
  @Input() saJquiDialog: any;

  constructor(private el: ElementRef) {
  }

  ngOnInit(){
    $(this.el.nativeElement).dialog(this.saJquiDialog)
  }
}

待解决需求 #

寻求可让弹窗场景下ngx-paypal正常渲染按钮的实现方案，优先支持直接在弹窗容器内放置组件的实现路径。

内容的提问来源于stack exchange，提问作者BobC