Question

我正在尝试在我的Angular 2应用程序中包含Stripe按钮，并在将以下代码添加到我的模板后，Angular将删除脚本标记。我知道在Angular 2中，脚本标签会从模板文本中删除。我想知道的是一步一步的说明，以获取下面的代码，以正确运行表单内的脚本。提前谢谢。

@Component({
 selector: 'payment',
 template: `
 <h1>Payment</h1>
 <form action="webtask-url" method="POST">
     <script
       src="https://checkout.stripe.com/checkout.js"
       class="stripe-button"
       data-key="pk_test_abcdabcdabcdabcdabcd"
       data-image="/assets/images/tj.png"
       data-name="My coffee"
       data-description="A cup of coffee for me"
       data-amount="214"
       data-locale="auto"
       data-panel-label="Buy me coffee"
       data-label="Buy $2.14 coffee for me">
     </script>
 </form>
`})

Answer 1

如果你把它放在index.html中它没有消毒。首先，我们需要在index.html文件的头部添加条带。这不能添加到组件模板中，因为角度2将删除它。

https://checkout.stripe.com/checkout.js”＆GT;

然后制作结帐组件

Answer 2

您可以通过ngOnInit事件

将Stripe脚本添加到组件中

确保您的组件类实现OnInit。

实现类似的东西，但对于SCRIPT标记，这适用于DIV元素：

              function addMyDivTag () { 
            // create a new div element 
            // and give it some content 
            var newDiv = document.createElement("div"); 
            var newContent = document.createTextNode("Hi there and   greetings!"); 
            newDiv.appendChild(newContent); //add the text node to the newly created div. 

            // add the newly created element and its content into the DOM 
            var currentDiv = document.getElementById("div1"); 
            document.body.insertBefore(newDiv, currentDiv); 
            }

在RC1中也是如此，默认情况下是HTML清理，所以请确保禁用它：

    class MyComponent {
      constructor(sanitizer: DomSanitizationService) {
        // ONLY DO THIS FOR VALUES YOU KNOW TO BE SAFE! NEVER ALLOW USER DATA IN THIS!
        this.safeStyleValue = sanitizer.bypassSecurityTrustStyle('rotate(90deg)');
        // then bind to `safeStyleValue` in your template.
      }
    }

如何在Angular 2模板中包含Stripe按钮

2 个答案: