Как я могу сгенерировать HTML из (части) шаблона Angular2?

Question

Мне нужно разрешить моим конечным пользователям копировать / вставлять вывод html шаблона компонента, например, в шаблон MailChimp или на свой собственный веб-сайт, в виде статического html.Мне нужно что-то похожее на кнопки, которые генерируют встраиваемый код iframe на некоторых веб-сайтах управления контентом, чтобы пользователь мог вставить этот iframe html в соответствующую часть своего сайта.

Мой (упрощенный) шаблон компонента сраздел, который выглядит следующим образом:

<div *ngFor="let item of items">
  <p>{{item.title}}</p>
</div>

... который во время выполнения должен создать HTML в DOM, который выглядит примерно так:

<p>item title 1</p>
<p>item title 2</p>
<p>item title 3</p>
.
.

Я хочу дать моим пользователямкнопка, которая скопирует сгенерированный html в буфер обмена, чтобы они могли вставить и отобразить его, например, в соответствующем разделе своего статического сайта.У меня уже есть пользовательская директива копирования в буфер обмена, которая будет обрабатывать фактическую операцию копирования для любой передаваемой мне строки, но что в этом случае следует копировать?Как получить доступ к «статической» версии html «<p>item title 1</p>...», которую пользователь видит в браузере?

Пожалуйста, дайте мне знать, если мой вопрос нуждается в дополнительных разъяснениях.Результаты Google, похоже, указывают на то, что это не обычная операция, поэтому у меня возникают проблемы с формулировкой вопроса с правильной терминологией.

Answer 1

Попробуйте преобразовать заголовок в переменную items в вашем компоненте так:

items = [{title: "<p>item title 1</p>"}, {title: "<p>item title 2</p>"}, {title: "<p>item title 3</p>"}]

Затем повторите код:

<div *ngFor="let item of items">
   {{item.title}}
</div>

Answer 2

Вы можете добиться этого, используя пользовательскую директиву в своем компоненте:

import { Directive, ElementRef} from '@angular/core';

@Directive({
  selector: '[myInnerHtml]'
})
export class MyInnerHtmlDirective {
  constructor(private _el: ElementRef) {}
  getInnerHtml(): string {
    return this._el.nativeElement.innerHTML;
  }
}

, используя внутренний шаблон компонента:

<div (click)="click()" myInnerHtml>
  <p *ngFor="let item of items">{{item}}</p>
</div>

Компонент:

import { Component, ViewChildren } from '@angular/core';
import { MyInnerHtmlDirective } from '../my-first.directive';

@Component({
  selector: 'test',
  templateUrl: './test.component.html'
})
export class TestComponent {
  @ViewChildren(MyInnerHtmlDirective) directives;
  constructor() { }
  items: string[] = ['item title 1', 'item title 2', 'item title 3']

  click() {
    let html: string = (<MyInnerHtmlDirective>this.directives.first).getInnerHtml();
    let cleanHmtl: string = html.replace(/<!--[\s\S]*?-->/g, ''); // deleting comments
    console.log(cleanHmtl);
  }
}

Itдолжен дать вам <p>item title 1</p><p>item title 2</p><p>item title 3</p>

Answer 3

Использовать & lt;и> только что я использовал ниже.

<div *ngFor="let item of items">
  &lt;p&gt;{{item.title}}&lt;/p&gt;
</div>