将ngx集成到角8 Webapp中
我的应用程序有一个PayPal支付集成使用ngx-paypal。当我将PayPal字符串从component.ts注入component.html时，无法获得要呈现的component.html按钮。注入是一个弹出支付窗口，它本身工作良好，如图所示。但是，将ngx-paypal包含到注入的字符串中将被忽略-没有控制台错误。我尝试了三种变体，但都没有效果--请看嵌入的评论。为了证明ngx-paypal工作，而不是问题，我在component.html中提供了一个直接工作的证明。
我尝试将ngx-paypal直接包含在component.html中，如try4中所示，但它也不起作用。try4实际上是我的首选，如果我们能让它发挥作用的话。
有什么想法吗？
谢谢，鲍勃
component.ts
this.paymentText =
`
<div style="background-color: #d8e7f3">
<p style="width: 350px; padding-top: 10px; padding-left: 15px; font-size: 16px;"><b>Please Select a Payment Method</b></p>
<div style="display: flex;">
<div style="width: 400px; padding-left: 15px;">
<b>Payment Type:</b> <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>Payment Amount:</b><input type="text" id="inputPmtAmt" name="inputPmtAmt" disabled style="width: 40%; text-align: center; background-color: #eaffea;"> $USD
</div>
</div>
<br>
<div style="display: flex;">
<div style="width: 90%; padding-left: 15px;">
<b>Payment Method:</b>
<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 id="paypal-checkout-btn"></div> OLD WAY; WORKED-->
<ngx-paypal [config]="payPalConfig"></ngx-paypal> <!-- NEW WAY try1; NOT WORKING-->
<!--<ngx-paypal [config]="` +this.payPalConfig +`"></ngx-paypal> NEW WAY try2; NOT WORKING-->
<!--<ngx-paypal [config]=` +this.payPalConfig +`></ngx-paypal> NEW WAY try3; NOT WORKING-->
</div>
</div>
</div>
</div>
`; 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'">
<!--<ngx-paypal [config]="payPalConfig"></ngx-paypal> NEW WAY try4; NOT WORKING-->
<div class="hr hr-12 hr-double"></div>
</div>
<ngx-paypal [config]="payPalConfig"></ngx-paypal> <!--PROOF OF WORKING-->截图
saJquiDialog
import {Directive, ElementRef, OnInit, Input} from '@angular/core';
declare var $: any;
$.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)
}
}回答 1
Stack Overflow用户
发布于 2021-01-03 04:26:12
我确定payPalConfig (以component.html显示)是未定义的，因为它是在component.ts中设置的。我不知道如何将payPalConfig传递给我正在使用的对话框指令saJquiDialog。
我的解决方案是使用一个更简单的对话框，因此我切换到了自定义模态，这在作者的博客中有很好的描述。在模态的open()中，我调用了设置payPalConfig的service.ts。
谢谢@derpirscher你的想法。鲍勃
component.html
<span style="padding-left: 10px;">
<button (click)="openModal('payment-details-1')"
class="btn btn-default projectbtn myHide" [(ngModel)]="paymentDialogBtn"
#namePD1 name="paymentDialogBtn" id="paymentDialogBtn" ngDefaultControl>
</button>
</span>
<jw-modal id="payment-details-1">
<h1>Payment Details</h1>
<div id="payment-dialog" [innerHTML]="paymentText | safeurl: 'html'"></div>
<ngx-paypal [config]="accountService.payPalConfig"></ngx-paypal>
<button (click)="closeModal('payment-details-1');">Close</button>
</jw-modal>https://stackoverflow.com/questions/65525047
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号