使用绑定将 angular 组件编译为 HTML

Question

我需要为我的地图标记气球主体提供实心 HTML 字符串。
我想使气球成为 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 ^ */
    });
}

Answer 1

您可以尝试将 MyBaloonWindowComponent 渲染到隐藏的 div 中，然后使用延迟，即 setTimeout(..., 0) 或更高级的调度、辅助服务或自定义事件接收结果 html 来自注入 ElementRef。

可以创建特殊组件（如 NgComponentOutlet）+ 将进行渲染的服务，然后将结果 html 发送到客户端代码。

Answer 2

我有点惊讶没有人建议使用 Angular Universal -- 是的，至少从 2.0 兼容版本开始，它呈现了整个文档，但您可以将单个组件加载到页面中, 渲染成 html 字符串 angular 通用，然后去除 <html> 标签等

https://github.com/angular/universal

Angular Universal 旨在在服务器端渲染 HTML，这从根本上讲是在不依赖 DOM 的情况下将渲染引擎暴露给代码。

同样值得注意的是，如果你想直接在 Angular 4 中访问 Renderer 或 RootRenderer，你必须使用 RendererFactory -- 但是这两个都直接暴露在 Angular 2

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

使用绑定将 angular 组件编译为 HTML

Compile angular component to HTML with bindings

javascript

angular2-template

angular