Angular 8 中的 HTML 绑定答案

【问题标题】：HTML binding in Angular 8Angular 8 中的 HTML 绑定
【发布时间】：2020-05-30 08:28:45
【问题描述】：

我无法向 Angular 8 显示 html 内容。

**注意：我正在接收我需要在 Angular 上显示的 html 模板作为 JSON 来自数据库，我正在获取它并将其保存到一个变量（例如，绘图），然后将该变量传递给 @ 987654321@

出于演示目的，我放置了一个与我从数据库中获取的数据类似的示例 html 模板。

HTML：

<div [innerHTML]="myTemplate"></div>

app.component.ts：

import { Component, OnInit} from '@angular/core'; 
import { DomSanitizer, SafeHtml} from '@angular/platform-browser';

@Component({
  selector: 'app-data-decomposition',
  templateUrl: './data-decomposition.component.html',
  styleUrls: ['./data-decomposition.component.css']

})

export class DataDecompositionComponent implements OnInit {

myTemplate:SafeHtml;

constructor(private sanitizer: DomSanitizer) { }

this.myTemplate = this.sanitizer.bypassSecurityTrustHtml(`<html>
  <head>
    <!-- Load plotly.js into the DOM -->
    <script src='https://cdn.plot.ly/plotly-latest.min.js'></script>
</head>

<body>
<p>plot come below...</>
    <div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div>

  <script type="text/javascript">
  var data = [
    {
      x: ['giraffes', 'orangutans', 'monkeys'],
      y: [20, 14, 23],
      type: 'bar'
    }
  ];

  Plotly.newPlot('myDiv', data);

  </script>
  </body>
  </html>`);

}

当我运行代码时，只有 <p> 标签内容“Plot come below..”显示到 Angular 前端，但 <script> 标签内的 Plotly 图表没有显示。谁能建议我哪里出错了。

【问题讨论】：

标签： html css typescript plot angular8

【解决方案1】：

将您的脚本标签放到 index.html 中。在您的组件中，您无法访问脚本标签。也不要忘记关闭

标签正确:)

<script src='https://cdn.plot.ly/plotly-latest.min.js'></script>
<script type="text/javascript">
  var data = [
    {
      x: ['giraffes', 'orangutans', 'monkeys'],
      y: [20, 14, 23],
      type: 'bar'
    }
  ];

  Plotly.newPlot('myDiv', data);

  </script>

示例：https://stackblitz.com/edit/angular-83tffr

【讨论】：

好的。但对我来说的问题是我在 this.myTemplate = this.sanitizer.bypassSecurityTrustHtml('html code') 内部传递的上面的 html 模板作为 JSON 来自后端，在这种情况下我不能在里面放置脚本标记index.html，那么你的解决方案是什么。请对这种情况发表您的意见

【解决方案2】：

它不会工作。首先，您尝试将整个 HTML 页面放入 div 中。其次，你应该首先在你的组件中启动脚本，然后加载 html

在组件 html 中。您可以放入 app.component.html 或您在 Angular 中创建的任何其他组件。我建议你创建一个新的并在你的应用组件中导入

<p>plot come below...</>
    <div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div>

如果您不能按照Çağrı TAÇYİLDİZ 的建议将脚本放在 index.html 中

或者试试这个方法：

import { Component, OnInit} from '@angular/core'; 
import { DomSanitizer, SafeHtml} from '@angular/platform-browser';

@Component({
  selector: 'app-data-decomposition',
  templateUrl: './data-decomposition.component.html',
  styleUrls: ['./data-decomposition.component.css']

})

export class DataDecompositionComponent implements OnInit {


constructor() { }

   public loadScript(url) {
        let node = document.createElement('script');
        node.src = url;
        node.type = 'text/javascript';
        node.async = true;
        node.charset = 'utf-8';
        document.getElementsByTagName('head')[0].appendChild(node);
    }


ngOnInit(){
  this.loadScript('https://cdn.plot.ly/plotly-latest.min.js');
}


}

脚本标签你可以放在/data-decomposition.component.html里面，但是我建议你放在你的index.html上，或者..你可以保存一个新的js文件，并在index.html中导入，或者使用类中的loadScript方法来导入。

<script type="text/javascript">
  var data = [
    {
      x: ['giraffes', 'orangutans', 'monkeys'],
      y: [20, 14, 23],
      type: 'bar'
    }
  ];

  Plotly.newPlot('myDiv', data);

  </script>

【讨论】：