时间戳

首页 > 解决方案 > 在 Angular 中渲染 HTML/CSS/JS

javascript - 在 Angular 中渲染 HTML/CSS/JS

问题描述

我收到以下代码作为点击帖子 API 的响应。此代码粘贴在 codepen 的 HTML 部分中时可以正常工作，如屏幕截图所示，但是当我尝试将其集成到 angular 的 html 文件中时，它只会在加载加载程序时给出空白。有人知道如何将它整合到 angular 中吗？任何提示就足够了！我尝试通过将下面的整个代码放在一个字符串中并通过 innerHtml 呈现它来做到这一点，但这也无济于事。

<!doctype html>
<html>

<head>
    <title>Payment Page · Razorpay</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta charset="utf-8">
    <script>
        var meta = {};
      var options = {"name":"XYZ Education","order_id":"order_GZjwHCFWRWeIOx","amount":"500000","currency":"INR","callback_url":"https:\/\/razorpay.com\/docs\/payment-gateway\/web-integration\/hosted\/checkout-options\/"};
      var urls = {};
      options.key = "";
    </script>
</head>

<body>
    <style>
        @keyframes lo {
            to {
                transform: rotate(360deg)
            }
        }

        @-webkit-keyframes lo {
            to {
                -webkit-transform: rotate(360deg)
            }
        }

        .loader {
            height: 24px;
            width: 24px;
            border-radius: 50%;
            display: inline-block;
            animation: lo .8s infinite linear;
            -webkit-animation: lo .8s infinite linear;
            transition: 0.3s;
            -webkit-transition: 0.3s;
            opacity: 0;
            border: 2px solid #3395FF;
            border-top-color: transparent
        }

        .vis {
            opacity: 1
        }
    </style>
    <div class="loader vis" style="position:absolute;top:115px;left:50%;margin-left:-12px"></div>
<script src="https://cdn.razorpay.com/static/hosted/embedded-entry.js"></script>

页面截图

标签： javascripthtmlcssangularrazorpay

解决方案

如果您尝试将其设置为特定 HTML 元素的 innerHTML，Angular 提供以下语法，其中yourhtml是包含您的 HTML 作为字符串的变量：

<div class="blog-post" [innerHtml]="yourhtml"></div>

受Cobus Kruger在这里的回答启发的答案，在那里他更好地阐明了这个主题

推荐阅读