在 Angular 中渲染 HTML/CSS/JS

Question

I'm getting the following code as a response of hitting a post API.我收到以下代码作为对 API 帖子的响应。 This code when pasted in HTML section of codepen works fine as shown in the screenshot but when I'm trying to integrate this in html file of angular, it is giving blank with only a loader loading.此代码粘贴到 codepen 的 HTML 部分时可以正常工作，如屏幕截图所示，但是当我尝试将其集成到 angular 的 html 文件中时，它只加载空白。 Does anybody have any idea as to how to integrate this in angular?有人知道如何将其集成到 angular 中吗？ Any hint would suffice.任何提示就足够了。 I tried doing this by placing the entire code below in a string and rendering it through innerHtml but that doesn't help too.我尝试通过将下面的整个代码放在一个字符串中并通过 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>

Page Screenshot页面截图

Answer 1

If you are trying to set this as innerHTML for a specific HTML element, Angular offers the following syntax, where yourhtml is a variable containing your HTML as a string:如果您尝试将其设置为特定 HTML 元素的 innerHTML，则 Angular 提供以下语法，其中yourhtml是包含 HTML 作为字符串的变量：

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

Answer inspired by Cobus Kruger 's answer here where he sheds better light on the subject受Cobus Kruger 在这里的回答启发的答案，在那里他更好地阐明了这个主题

在 Angular 中渲染 HTML/CSS/JS

问题描述

1 个解决方案

解决方案1
0 2021-02-10 07:23:44

在 Angular 中渲染 HTML/CSS/JS

问题描述

1 个解决方案

解决方案1 0 2021-02-10 07:23:44

解决方案1
0 2021-02-10 07:23:44