Компилировать компонент 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-код клиента.
