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

Мне нужно создать сплошную строку HTML для моего тела маркера.
Я хочу сделать baloon компонентом Angular и использовать привязки и встроенные директивы (*ngFor, *ngIf и т.д.). Поэтому я ищу способ оценить все привязки в шаблоне компонента и скомпилировать результат в строку...
Как достичь этого, или если этот подход не является angular - какой шаблон может быть рекомендован?

// Component

import {Component} from '@angular2/core';
import {AnyThing} from './somewhere/in/my/app/anything.model.ts';

@Component({
  selector: 'my-baloon-window',
  template: `<p>This is a baloon for {{ any.name }}</p>`
})
export class MyBaloonWindowComponent {
    constructor(public something: AnyThing) {}
}


// Implementation

import {AnyThing} from './somewhere/in/my/app/anything.model.ts';
import {MyBaloonWindowComponent} from './path/to/baloon-window.component';

/* { ...some code here... } */

private createBaloonWindow(thing: AnyThing): google.maps.InfoWindow {
    return new ymap.map.BaloonWindow({
      /* I want something like this */
      content: new MyBaloonWindowComponent(thing).toString() 
      /* ^ this is what I want ^ */
    });
}

Ответ 1

Я удивлен, что никто не предложил использовать Angular Universal - да, по крайней мере, из версии 2.0, совместимой с 2.0, он отобразил весь документ, но вы могли бы загрузить свой особый компонент в страницу, сделать html с Angular универсальным, а затем разделите теги <html> и т.д.

https://github.com/angular/universal

Angular Universal предназначен для рендеринга HTML на стороне сервера, что принципиально связано с тем, что механизм визуализации может кодировать, не полагаясь на DOM.

Также обратите внимание, что если вы хотите получить доступ к Renderer или RootRenderer непосредственно в Angular 4, вам нужно будет создать новый экземпляр с помощью RendererFactory, но оба они были открыты непосредственно в Angular 2

https://jaxenter.com/angular-4-top-features-133165.html

Ответ 2

Вы можете попытаться отобразить MyBaloonWindowComponent в скрытый div, а затем использовать задержку, т.е. setTimeout(..., 0) или более продвинутое планирование, вспомогательную службу или пользовательское событие, получающее полученный html из введенного ElementRef.

Можно создать специальный компонент (например, NgComponentOutlet) +, который будет выполнять рендеринг, а затем исправить полученный html-код клиента.