2

Нашла такой пример вызова функции из innerHtml для Angular https://stackblitz.com/edit/angular-innerhtml-examples . Но вот что делать, если функция содержит в себе переменную,

  openWindow(string) {
    alert(string);
  }

значение которой можно получить только в конструкторе

let currentString = "green";
this.content = this.sanitizer.bypassSecurityTrustHtml(
  '<button type="button" id="submitButton" (click)="openWindow()">Submit</buttn>'
);
1
  • 1
    Судя по тому, что он вызывает функцию 2, 4, 8 и так далее раз, это неправильное решение
    – Kain
    5 янв 2022 в 23:08

1 ответ 1

0

Вам нужно сделать веб-компонент, который будет патчить глобальный объект.

Для примера, воспользуемся этим веб-компонентом с гитхаба

ecg-line.webcomponent.ts

const HEIGHT = 125;
const WIDTH = 275;
const INTERVAL = 30;

const CURVE_COLOR = "#22ff22";

let heartData = [0, 0, 0, 0, 0];
let heartDataIndex = 0;
let beatDataIndex = -1;
let BANG = false;

function fillHeartData(length) {
  if (length !== heartData.length) {
    heartData = new Array(length);
    for (let i = 0; i < length; i++) {
      heartData[i] = 0;
    }
  }
}

function fillBeatData() {
  const getValue = (idx) => idx === 0 ? Math.random() * 0.1 + 0.1
    : idx === 1 ? Math.random() * 0.1 + 0.0
    : idx === 2 ? Math.random() * 0.3 + 0.7
    : idx === 3 ? Math.random() * 0.1 - 0.05
    : idx === 4 ? Math.random() * 0.3 - 0.8
    : idx === 5 ? Math.random() * 0.1 - 0.05
    : idx === 6 ? Math.random() * 0.1 - 0.05
    : idx === 7 ? Math.random() * 0.1 + 0.15
    : 0;
  heartData[heartDataIndex] = getValue(beatDataIndex);
  beatDataIndex++;
  if (beatDataIndex > 7) {
    beatDataIndex = -1
  }
}

function fillRandomData() {
  heartData[heartDataIndex] = Math.random() * 0.05 - 0.025;
}

function updateData() {
  heartDataIndex++;
  if (heartDataIndex >= heartData.length) {
    heartDataIndex = 0;
  } else {
    heartDataIndex++;
  }
  if (beatDataIndex >= 0 || BANG) {
    fillBeatData();
    BANG = false;
  } else {
    fillRandomData();
  }
}

function ellipse(ctx, x, y, a, b) {
  ctx.save();
  ctx.beginPath();
  ctx.translate(x, y);
  ctx.scale(a / b, 1);
  ctx.arc(0, 0, b, 0, Math.PI * 2, true);
  ctx.restore();
  ctx.closePath();
}

function EcgLine() {

  const self = Reflect.construct(HTMLElement, [], EcgLine);

  const height = self.hasAttribute('height') ? self.getAttribute('height') : HEIGHT;
  const width = self.hasAttribute('width') ? self.getAttribute('width') : WIDTH;

  const canvas = document.createElement('canvas');
  [canvas.height, canvas.width] = [height, width];
  const context = canvas.getContext('2d');

  const onPaint = () => {
    context.clearRect(0, 0, width, height);

    const baseY = height / 2;
    const length = heartData.length;
    const step = (width - 5) / length;
    const yFactor = height * 0.35;
    let heartIndex = (heartDataIndex + 1) % length;
    context.strokeStyle = CURVE_COLOR;

    context.beginPath();
    context.moveTo(0, baseY);
    let i = 0, x = 0, y = 0;
    for (i = 0; i < length; i++) {
      x = i * step;
      y = baseY - heartData[heartIndex] * yFactor;
      context.lineTo(x, y);
      heartIndex = (heartIndex + 1) % length;
    }
    context.stroke();
    context.closePath();

    context.beginPath();
    context.fillStyle = CURVE_COLOR;
    ellipse(context, x - 1, y - 1, 2, 2);
    context.fill();
    context.closePath();
  };

  const interval = setInterval(() => {
    if (document.contains(canvas)) {
      updateData();
      onPaint();
    } else {
      clearInterval(interval);
    }
  }, INTERVAL);

  fillHeartData(Math.max(100, Math.floor(width * 0.5)));

  self.appendChild(canvas);

  return self;
}

window['ecgLine'] = (callback) => callback(() => BANG = true); 

EcgLine.prototype = Object.create(HTMLElement.prototype);
customElements.define('ecg-line', EcgLine as any);

app.component.ts

import "./ecg-line.webcomponent";

@Component({
  template: `
    <div [innerHTML]="someStaticHtmlSafe">
    </div>
  `
})
class AppComponent implements OnInit {

  someStaticHtml = '<ecg-line></ecg-line>'

  someStaticHtmlSafe = this.sanitizer.bypassSecurityTrustHtml(this.someStaticHtml)

  constructor(sanitizer: DomSanitizationService) {
  }

  ngOnInit() {
    // передаем коллбек через window (globalThis)
    ecgLine((bang) => setInterval(() => bang(), 1000));
  }
}

Передать переменную внутрь веб-компонента можно через аттрибуты, см первые три строчки веб-компонента

<ecg-line height="125" width="275"></ecg-line>

...

const self = Reflect.construct(HTMLElement, [], EcgLine);
self.hasAttribute('height') ? self.getAttribute('height') : HEIGHT;

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.