在 Angular 中渲染 HTML/CSS/JS

Question

我收到以下代碼作為對 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>

頁面截圖

Answer 1

如果您嘗試將其設置為特定 HTML 元素的 innerHTML，則 Angular 提供以下語法，其中yourhtml是包含 HTML 作為字符串的變量：

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

受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