Как скомпилировать компонент Angular в строку HTML со всеми привязками
html angular angular-programming

Как скомпилировать компонент Angular в строку HTML со всеми привязками

20 декабря 2022 г.

Обычный вариант использования для компиляции компонентов Angular в строки HTML:

  • Формирование внешнего интерфейса PDF с заданным HTML
  • ПЕЧАТЬ HTML
  • Нативные подключаемые модули JS, которым требуется HTML в виде строки.

==К сожалению, в Angular нет открытого метода для компиляции компонента Angular в строку HTML==. Но благодаря ComponentFactoryResolver в Angular мы можем создать обходной путь для этого. Используя ComponentFactoryResolver, мы можем динамически отображать требуемый компонент в шаблон, а затем мы получаем доступ к nativeElement.innerHTML из componentRef.

Здесь следует отметить одну вещь: мы использовали import { asyncScheduler } from 'rxjs'; для получения HTML со всеми привязками. Если мы не настроим этот планировщик, привязка данных не будет доступна в анализируемом HTML.

app.component.ts

import {
  Component,
  ComponentFactory,
  ComponentFactoryResolver,
  ViewChild,
  ViewContainerRef,
} from '@angular/core';
import { asyncScheduler } from 'rxjs';
import { PdfHtmlComponent } from './pdf-html.component';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  @ViewChild('pdfHtml', { read: ViewContainerRef }) container;

  constructor(private resolver: ComponentFactoryResolver) {}

  getPDFHtml() {
    this.container.clear();
    const factory: ComponentFactory<any> =
      this.resolver.resolveComponentFactory(PdfHtmlComponent);

    const componentRef = this.container.createComponent(factory);
    componentRef.instance.title = 'Injected Title';

    asyncScheduler.schedule(() => {
      const htmlString = componentRef.location.nativeElement.innerHTML;
      componentRef.destroy();
      console.log('HTML STRING:', htmlString);
    });
  }
}

app.component.html

<button (click)="getPDFHtml()">CLICK TO GET COMPONENT HTML</button>
<p>Output is in the console</p>
<div [hidden]="true">
  <template #pdfHtml></template>
</div>

pdf-html.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'pdf-html',
  templateUrl: './pdf-html.component.html',
})
export class PdfHtmlComponent {
  title: string = 'Default Title';

  STYLES: any = {
    MAIN_CONTAINER: 'background:red;',
    ITEM_BOX: 'color:red;',
  };
}

pdf-html.component.html

<h2>Title: {{ title }}</h2>

<table style="{{ STYLES.MAIN_CONTAINER }}">
  <tr style="{{ STYLES.ITEM_BOX }}">
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr style="{{ STYLES.ITEM_BOX }}">
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr style="{{ STYLES.ITEM_BOX }}">
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr style="{{ STYLES.ITEM_BOX }}">
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
</table>

Демонстрацию можно посмотреть здесь

или вы можете поиграть с кодом здесь

Удачного кодирования!!! 🎉🎉🎉

Оригинал

Recent Post

Categories

PREVIOUS ARTICLE
NEXT ARTICLE