如何在Angular 2模板中包含條紋按鈕

我想在我的Angular 2應用中包含條紋按鈕，並且在將以下代碼添加到我的模板時，腳本標記將被Angular刪除。據我所知，在Angular 2腳本標籤從模板文本中刪除。我想知道的是獲取下面的代碼以正確運行表單中的腳本的一步一步的指令。先謝謝你。如何在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> 
`})

來源

2016-06-08 Darragh Murphy

我會想象你必須使用條紋的定製集成的步驟通過JS做到這一點：HTTPS ：//stripe.com/docs/checkout#integration-custom當你可以以更好的方式完成時，你不想將這種類型的JS腳本放在Angular模板中。 – SamV

你可以通過ngOnInit事件條紋腳本添加到您的組件

確保您的組件類實現的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 sanitazation默認情況下是這樣，請確保您禁用它：

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. 
     } 
    }

來源

2016-06-08 14:10:03 AngJobs

所以人們會用簡單的'腳本'代替旋轉'（90deg）'，這是否正確？同樣原諒我的無知，因爲我只是開始學習Angular 2，但是你會在哪裏找到你在上面定義的那個函數？ –

如果你把它放在index.html中沒有被消毒。首先，我們需要在index.html文件的頭部添加條紋。這不能被添加到組件模板，因爲角2會將其刪除。

https://checkout.stripe.com/checkout.js」>

然後進行結帳組件

來源

2016-11-17 18:25:09 user2084605

如何在Angular 2模板中包含條紋按鈕

回答

相關問題