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

Question

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

Фед*_*ков 10 javascript angular2-template angular

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

Run Code Online (Sandbox Code Playgroud)

Answer 1

tcm*_*ore 2

我有点惊讶没有人建议使用 Angular Universal —— 是的，至少从 2.0 兼容版本开始它渲染了整个文档，但是你可以将单个组件加载到页面中，使用 Angular Universal 渲染为 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

归档时间：	8 年，7 月前
查看次数：	419 次
最近记录：	8 年，6 月前