HTML переплет в Angular 8 - PullRequest
Новая
       0

HTML переплет в Angular 8

0 голосов
/ 14 февраля 2020

Я не могу отобразить html содержимое на Angular 8.

** Примечание: я получаю html шаблон, который мне нужно отобразить на Angular, поступает из базы данных как JSON, который я извлекаю и сохраняю в переменную (например, plot), а затем передаю эту переменную в this.myTemplate = this.sanitizer.bypassSecurityTrustHtml(this.plot)

Для демонстрации я помещаю образец 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> содержимое тега «График ниже ...» отображается во внешнем интерфейсе Angular, но диаграмма Plotly, которая находится внутри тега <script>, не отображается. Может кто-нибудь подсказать мне, где я иду не так.

Ответы [ 2 ]

1 голос
/ 14 февраля 2020

Используйте теги сценариев для индексации. 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

0 голосов
/ 14 февраля 2020

Это не сработает. Сначала вы пытаетесь поместить целую HTML страницу в div. Во-вторых, вы должны сначала запустить сценарии в своем компоненте, а затем загрузить html

в компоненте html. Вы можете поместить в app.component. html или любой другой компонент, который вы создаете в Angular. Я бы посоветовал вам создать новый и импортировать в ваш компонент приложения 

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

, если вы не можете поместить скрипт в индекс. html, как предложено Çağrı TAÇYİLDİZ

, или попробуйте этот метод: 

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, но я предлагаю вам добавить в индекс. html, или .. вы можете сохранить новый файл js и импортируйте его в индекс. html или используйте метод loadScript в классе для его импорта. 

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

  Plotly.newPlot('myDiv', data);

  </script>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...