Рендеринг HTML/CSS/JS в Angular

Я получаю следующий код в ответ на обращение к почтовому API. Этот код при вставке в HTML-раздел codepen отлично работает, как показано на снимке экрана, но когда я пытаюсь интегрировать его в html-файл angular, он дает пустой файл с загрузкой только загрузчика. Кто-нибудь знает, как интегрировать это в 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>

Снимок экрана страницы


person Shobhit Porwal    schedule 10.02.2021    source источник
comment
Как именно вы пытались интегрировать эту HTML-страницу в свое приложение Angular? Потому что здесь Angular даже не загружен   -  person Jeremy Thille    schedule 10.02.2021


Ответы (1)


Если вы пытаетесь установить это как innerHTML для определенного элемента HTML, Angular предлагает следующий синтаксис, где yourhtml — это переменная, содержащая ваш HTML в виде строки:

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

Ответ вдохновлен ответом Кобуса Крюгера здесь, где он лучше освещает тему

person Syed H    schedule 10.02.2021