angular 2 等效于 react renderToString
Posted
技术标签:
【中文标题】angular 2 等效于 react renderToString【英文标题】：angular 2 equivalent of react renderToString 【发布时间】：2016-10-18 14:28:59 【问题描述】：我正在寻找 react-dom/server.renderToString 的 angular 2 等价物
import renderToString from 'react-dom/server';
// Render the component to a string
const html = renderToString(
<App />
);
使用 NodeJs 将指令/组件转换为 HTML 的最简单的代码示例是什么？
我想应该可以使用以下软件包之一：
@angular/compiler - v2.0.0-rc.2
@angular/platform-server - v2.0.0-rc.2
【问题讨论】：
你的目标是什么？您可以使用 ComponentResolver 创建 ComponentFactory 并动态创建组件，然后获取 ComponentRef 然后将 HTMLElement 转换为字符串。 @kemsky 你能提供一个答案，用代码演示该解决方案吗？ 【参考方案1】：Angular 组件使用 HTML 模板作为开发过程的一部分，但我们实际上将这些模板编译为 javascript，而不是 HTML，以便将它们呈现给浏览器。
可能对您有帮助的最接近的事情是查看https://github.com/angular/universal。这个项目代表了在服务器上运行 Angular 组件的最佳方式，该方式呈现 javascript 和 HTML，并通过网络将其传递给浏览器。
我们不能提供一个简单的方法来“渲染”到 HTML，因为任何类型的“渲染”都涉及到整个 Angular 框架（核心、通用、模板编译）并处理你的整个组件树。
希望这会有所帮助！
【讨论】：
谢谢，我对 angular/universal 进行了更深入的了解，他们有一个名为renderDocument 的函数，它实际上可以满足我的需要，但它已被弃用。
github.com/angular/universal/blob/master/modules/universal/src/…
应该类似于：function (componentType, nodeProviders) return bootstrap(componentType, nodeProviders) .then((appRef) => stringifyElement(appRef.location.nativeElement)) 【参考方案2】：
import 'angular2-universal/polyfills';
import
provide,
REQUEST_URL,
ORIGIN_URL,
NODE_ROUTER_PROVIDERS,
NODE_HTTP_PROVIDERS,
Bootloader
from 'angular2-universal';
import APP_BASE_HREF from '@angular/common';
const bootloader = new Bootloader(
platformProviders: [
provide: ORIGIN_URL, useValue: 'http://localhost:3000',
provide: APP_BASE_HREF, useValue: '/'
],
async: true,
preboot: false // appRoot: 'app-root' // your top level app component selector
);
export function ngApp(req, res)
let url = req.originalUrl || '/';
const config =
template: `<!doctype html><html><head>...</head><body>...</body></html>`,
directives: [AppComponent],
providers: [
provide: REQUEST_URL, useValue: url,
...NODE_ROUTER_PROVIDERS,
...NODE_HTTP_PROVIDERS
]
;
bootloader.serializeApplication(config)
.then(html => res.send(html));
【讨论】：
不知道你为什么把它和 express 混在一起。猜猜这根本没有必要。你为什么不包括 import 语句？以上是关于angular 2 等效于 react renderToString的主要内容，如果未能解决你的问题，请参考以下文章
在 React 中等效于来自 React Native 的 FlatList
Rxjs 6 等效于 Observable.create(subscriber -> ...).share()