Angular: рендеринг и получение HTML компонента динамически

Question

Визуализация HTML-компонента, чтобы его можно было использовать для открытия новой вкладки типа about: blank (пустая новая html-страница, не имеющая ничего общего с самим приложением).

Почему? Чтобы избежать создания HTML с использованием строковой переменной, например:

var html = '<div>
              <h3>My Template</h3>
              ' + myProperty + ' 
            </div>';

Я видел, что вы можете динамически визуализировать компонент, используя ViewContainerRef.createComponent и ComponentFactoryResolver. Проблема в том, что компонент отображается внутри контейнера представления в приложении. То, что я хотел бы сделать, это сгенерировать HTML этого компонента, чтобы затем я мог использовать этот HTML, чтобы поместить его в любое место. (в данном случае в свойстве документа объекта, заданного методом window.open())

Пример:

@Component({
  selector: 'app-component',
  template: `
            <div>
              <h3>My Template</h3>
              {{ myProperty }}
            </div>
          `,
  styleUrls: ['./my.component.less']
})
export class MyComponent{
  myProperty: string;
}

Я ожидаю использоватьэто так:

//get new window tab
var newTab = window.open('about:blank', '_blank');

//get the HTML of the component

//use it to open the new tab
newTab.document.write(html);