首页 文章

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

提问于
浏览 次
10

我需要为我的 Map 标记气球体提供一个可靠的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 ^ */
    });
}
javascript angular angular2-template

2 回答

  • 2

    我有点惊讶没有人建议使用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

    回复于
  • 1

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

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

    回复于

相关问题