css - 如何使用 Angular 6 将 html 字符串呈现到 div

问题描述

我正在使用带有 python API 的 Angular 6 应用程序。该 api 为我提供了一些 html 作为响应。我想在 div 或其他东西中将相同的内容呈现给我现有的页面。按照我尝试过的方法。但它不起作用。

测试.ts

public myTemplate = `

    <!DOCTYPE html>
    <html lang="en">

      <head>

          <meta charset="utf-8">
          <title>Bokeh Plot</title>




            <link rel="stylesheet" href="https://cdn.bokeh.org/bokeh/release/bokeh-0.13.0.min.css" type="text/css" />



            <script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-0.13.0.min.js"></script>
            <script type="text/javascript">
                Bokeh.set_log_level("info");
            </script>




      </head>


      <body>





                <div class="bk-root" id="ec68dc18-3ea4-4603-af8c-ebfb43debebb"></div>




            <script type="application/json" id="d514fe36-7943-4d16-a424-cedd960a796a">
              {"4bc1a9ea-ca23-461d-ba34-1f343aa95582":{"roots":{"references":[{"attributes":{},"id":"4c870835-c3fb-4478-aca2-97bc6b941df2","type":"Selection"},{"attributes":{"source":{"id":"87649288-1899-474c-9d7b-ce767e72410f","type":"ColumnDataSource"}},"id":"81a0b66b-176e-4ec4-99da-bad777efc57e","type":"CDSView"},{"attributes":{"fill_color":{"value":"firebrick"},"line_color":{"value":"firebrick"},"top":{"field":"top"},"width":{"value":0.5},"x":{"field":"x"}},"id":"adfa4acd-4026-4435-8d88-0d920ea369cc","type":"VBar"},{"attributes":{},"id":"b166c42e-005c-434d-a949-246d405e3118","type":"BasicTicker"},{"attributes":{"formatter":{"id":"23aa89e4-51d2-41ba-b36e-d5f0fa70d83b","type":"BasicTickFormatter"},"plot":{"id":"9a10275d-c115-45b8-8ee4-ebd99024f6a7","subtype":"Figure","type":"Plot"},"ticker":{"id":"838d1854-406b-41eb-aa9e-780ca77baa2d","type":"BasicTicker"}},"id":"55a97b9d-5dfa-41ef-a0df-726227868d68","type":"LinearAxis"},{"attributes":{"overlay":{"id":"4283b465-683d-4292-827c-2939a040a257","type":"BoxAnnotation"}},"id":"762d72cd-d5e8-4a38-8475-53af2ae5394c","type":"BoxZoomTool"},{"attributes":{"callback":null,"data":{"top":[1.2,2.5,3.7],"x":[1,2,3]},"selected":{"id":"4c870835-c3fb-4478-aca2-97bc6b941df2","type":"Selection"},"selection_policy":{"id":"32fde843-8376-415c-8f15-8e4eebe5ab5b","type":"UnionRenderers"}},"id":"87649288-1899-474c-9d7b-ce767e72410f","type":"ColumnDataSource"},{"attributes":{"callback":null},"id":"bdfebd4e-8eb1-434b-99a2-aad0ec312fc6","type":"DataRange1d"},{"attributes":{"below":[{"id":"55a97b9d-5dfa-41ef-a0df-726227868d68","type":"LinearAxis"}],"left":[{"id":"543c2285-b090-4ec0-b03d-8307b1101ea1","type":"LinearAxis"}],"plot_height":400,"plot_width":400,"renderers":[{"id":"55a97b9d-5dfa-41ef-a0df-726227868d68","type":"LinearAxis"},{"id":"4481bcab-b935-48e1-8af6-51dc2b4c5758","type":"Grid"},{"id":"543c2285-b090-4ec0-b03d-8307b1101ea1","type":"LinearAxis"},{"id":"daf6c04a-bd1b-436b-81d4-9915521ce351","type":"Grid"},{"id":"4283b465-683d-4292-827c-2939a040a257","type":"BoxAnnotation"},{"id":"cd4c0165-4fd7-4708-b595-011050e42a34","type":"GlyphRenderer"}],"title":{"id":"1d30363a-e963-4de6-b12a-bf49f7b75396","type":"Title"},"toolbar":{"id":"0a177109-bf65-430f-a6b6-2f0bc7cb1659","type":"Toolbar"},"x_range":{"id":"8cdb6c75-b7d9-41e2-8931-f35aafb426bb","type":"DataRange1d"},"x_scale":{"id":"c4a67701-9422-4ca8-92f6-2921a3410f74","type":"LinearScale"},"y_range":{"id":"bdfebd4e-8eb1-434b-99a2-aad0ec312fc6","type":"DataRange1d"},"y_scale":{"id":"8dc904d3-4a9b-4a62-92c6-bd3c6c774feb","type":"LinearScale"}},"id":"9a10275d-c115-45b8-8ee4-ebd99024f6a7","subtype":"Figure","type":"Plot"},{"attributes":{"formatter":{"id":"712363fd-8d5c-4e0f-8873-1a66bce6295b","type":"BasicTickFormatter"},"plot":{"id":"9a10275d-c115-45b8-8ee4-ebd99024f6a7","subtype":"Figure","type":"Plot"},"ticker":{"id":"b166c42e-005c-434d-a949-246d405e3118","type":"BasicTicker"}},"id":"543c2285-b090-4ec0-b03d-8307b1101ea1","type":"LinearAxis"},{"attributes":{},"id":"23aa89e4-51d2-41ba-b36e-d5f0fa70d83b","type":"BasicTickFormatter"},{"attributes":{},"id":"02584c93-6556-4f1d-9a9e-d9da231775b7","type":"WheelZoomTool"},{"attributes":{},"id":"32fde843-8376-415c-8f15-8e4eebe5ab5b","type":"UnionRenderers"},{"attributes":{"plot":null,"text":"Bar chart"},"id":"1d30363a-e963-4de6-b12a-bf49f7b75396","type":"Title"},{"attributes":{},"id":"0610408e-ae96-4dd8-a3cf-51202dae72d0","type":"PanTool"},{"attributes":{},"id":"c4a67701-9422-4ca8-92f6-2921a3410f74","type":"LinearScale"},{"attributes":{},"id":"2187536e-d109-4e8d-8703-82238859b09c","type":"ResetTool"},{"attributes":{"plot":{"id":"9a10275d-c115-45b8-8ee4-ebd99024f6a7","subtype":"Figure","type":"Plot"},"ticker":{"id":"838d1854-406b-41eb-aa9e-780ca77baa2d","type":"BasicTicker"}},"id":"4481bcab-b935-48e1-8af6-51dc2b4c5758","type":"Grid"},{"attributes":{"data_source":{"id":"87649288-1899-474c-9d7b-ce767e72410f","type":"ColumnDataSource"},"glyph":{"id":"adfa4acd-4026-4435-8d88-0d920ea369cc","type":"VBar"},"hover_glyph":null,"muted_glyph":null,"nonselection_glyph":{"id":"723c4bbd-e283-494c-8fd4-0359b13a8f1f","type":"VBar"},"selection_glyph":null,"view":{"id":"81a0b66b-176e-4ec4-99da-bad777efc57e","type":"CDSView"}},"id":"cd4c0165-4fd7-4708-b595-011050e42a34","type":"GlyphRenderer"},{"attributes":{"fill_alpha":{"value":0.1},"fill_color":{"value":"#1f77b4"},"line_alpha":{"value":0.1},"line_color":{"value":"#1f77b4"},"top":{"field":"top"},"width":{"value":0.5},"x":{"field":"x"}},"id":"723c4bbd-e283-494c-8fd4-0359b13a8f1f","type":"VBar"},{"attributes":{},"id":"c112bcea-cecc-4e8a-a20f-88affc9fb364","type":"HelpTool"},{"attributes":{},"id":"4ee66afa-65c5-45ac-bcd6-cf74398cd84c","type":"SaveTool"},{"attributes":{},"id":"8dc904d3-4a9b-4a62-92c6-bd3c6c774feb","type":"LinearScale"},{"attributes":{},"id":"838d1854-406b-41eb-aa9e-780ca77baa2d","type":"BasicTicker"},{"attributes":{"active_drag":"auto","active_inspect":"auto","active_multi":null,"active_scroll":"auto","active_tap":"auto","tools":[{"id":"0610408e-ae96-4dd8-a3cf-51202dae72d0","type":"PanTool"},{"id":"02584c93-6556-4f1d-9a9e-d9da231775b7","type":"WheelZoomTool"},{"id":"762d72cd-d5e8-4a38-8475-53af2ae5394c","type":"BoxZoomTool"},{"id":"4ee66afa-65c5-45ac-bcd6-cf74398cd84c","type":"SaveTool"},{"id":"2187536e-d109-4e8d-8703-82238859b09c","type":"ResetTool"},{"id":"c112bcea-cecc-4e8a-a20f-88affc9fb364","type":"HelpTool"}]},"id":"0a177109-bf65-430f-a6b6-2f0bc7cb1659","type":"Toolbar"},{"attributes":{"bottom_units":"screen","fill_alpha":{"value":0.5},"fill_color":{"value":"lightgrey"},"left_units":"screen","level":"overlay","line_alpha":{"value":1.0},"line_color":{"value":"black"},"line_dash":[4,4],"line_width":{"value":2},"plot":null,"render_mode":"css","right_units":"screen","top_units":"screen"},"id":"4283b465-683d-4292-827c-2939a040a257","type":"BoxAnnotation"},{"attributes":{},"id":"712363fd-8d5c-4e0f-8873-1a66bce6295b","type":"BasicTickFormatter"},{"attributes":{"dimension":1,"plot":{"id":"9a10275d-c115-45b8-8ee4-ebd99024f6a7","subtype":"Figure","type":"Plot"},"ticker":{"id":"b166c42e-005c-434d-a949-246d405e3118","type":"BasicTicker"}},"id":"daf6c04a-bd1b-436b-81d4-9915521ce351","type":"Grid"},{"attributes":{"callback":null},"id":"8cdb6c75-b7d9-41e2-8931-f35aafb426bb","type":"DataRange1d"}],"root_ids":["9a10275d-c115-45b8-8ee4-ebd99024f6a7"]},"title":"Bokeh Application","version":"0.13.0"}}
            </script>
            <script type="text/javascript">
              (function() {
                var fn = function() {
                  Bokeh.safely(function() {
                    (function(root) {
                      function embed_document(root) {

                      var docs_json = document.getElementById('d514fe36-7943-4d16-a424-cedd960a796a').textContent;
                      var render_items = [{"docid":"4bc1a9ea-ca23-461d-ba34-1f343aa95582","roots":{"9a10275d-c115-45b8-8ee4-ebd99024f6a7":"ec68dc18-3ea4-4603-af8c-ebfb43debebb"}}];
                      root.Bokeh.embed.embed_items(docs_json, render_items);

                      }
                      if (root.Bokeh !== undefined) {
                        embed_document(root);
                      } else {
                        var attempts = 0;
                        var timer = setInterval(function(root) {
                          if (root.Bokeh !== undefined) {
                            embed_document(root);
                            clearInterval(timer);
                          }
                          attempts++;
                          if (attempts > 100) {
                            console.log("Bokeh: ERROR: Unable to run BokehJS code because BokehJS library is missing")
                            clearInterval(timer);
                          }
                        }, 10, root)
                      }
                    })(window);
                  });
                };
                if (document.readyState != "loading") fn();
                else document.addEventListener("DOMContentLoaded", fn);
              })();
            </script>

      </body>

    </html>`;

测试.html

<div [innerHtml]="myTemplate">

  </div>

但它在 DOM 中呈现为文本而不是 HTML。请帮我解决同样的问题。

标签： csstypescriptangular6

css - 如何使用 Angular 6 将 html 字符串呈现到 div

问题描述

解决方案

推荐阅读