Question

我需要为我的地图标记气球体提供一个可靠的HTML字符串。我想让baloon成为一个Angular组件，并使用绑定和内置指令（*ngFor, *ngIf等）。所以我正在寻找一种方法来评估组件模板中的所有绑定并将结果编译为字符串...
如何实现这一目标或者如果这种方法是非角度的 - 建议的模式是什么？

// 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

我有点惊讶没有人建议使用Angular Universal - 是的，至少在2.0兼容版本中它渲染整个文档，但你可以将你的单个组件加载到页面中，渲染到带有角度通用的html字符串，然后去掉<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

Answer 2

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

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

使用绑定将角度组件编译为HTML

2 个答案: