угловой 2 эквивалент реагировать renderToString

Ищу угловой 2 эквивалента react-dom/server.renderToStringугловой 2 эквивалент реагировать renderToString

import { renderToString } from 'react-dom/server';  
// Render the component to a string 
const html = renderToString(
    <App /> 
);

Что такое простой пример кода, чтобы преобразовать директиву/компонент в HTML с использованием NodeJs?

Я предполагаю, что это должно быть возможно с одним из этих пакетов:

@ угловой/компилятором - v2.0.0-РК-2
@ угловой/платформы-сервер - v2. 0,0-РК-2

источник

2016-06-16 jantimon

Какая ваша цель? Вы можете использовать ComponentResolver для создания ComponentFactory и динамического создания компонента, затем получить ComponentRef и затем преобразовать HTMLElement в строку. – kemsky

@kemsky вы могли бы дать ответ с кодом, демонстрирующим это решение? – pxwise

Угловые компоненты использовать шаблоны HTML как часть процесса разработки, но мы на самом деле обобщить эти шаблоны на JavaScript, а не HTML, чтобы г завершите их в браузере.

Ближайшая вещь, которая может вам помочь, это посмотреть на https://github.com/angular/universal. Этот проект представляет собой лучший способ запуска ваших угловых компонентов на сервере таким образом, чтобы он отображал javascript и HTML и доставлял их в браузер через сеть.

Мы не можем предоставить простой метод «рендеринга» для HTML, потому что любой вид «рендеринга» включает в себя всю структуру углов (основную, общую, компиляцию шаблона) и обработку всего дерева компонентов.

Надеюсь, это поможет!

источник

2016-06-17 15:25:45 PeEll

Спасибо, что я углубился в угловое/универсальное, и у них есть функция под названием «renderDocument», которая действительно делает то, что мне нужно, но она устарела. – jantimon

https://github.com/angular/universal/blob/master/modules/universal/src/node/render.ts#L110-L120 – jantimon

Должно быть что-то вроде: 'function (componentType, nodeProviders) { return bootstrap (componentType, nodeProviders) .then ((appRef) => stringifyElement (appRef.location.nativeElement)) } ' – jantimon

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)); 
}

источник

2016-06-19 16:44:08 drejohnson

Не знаете, почему вы смешиваете его с экспрессом. Угадайте, что это совсем не обязательно .. почему вы не включать заявления импорта? – jantimon

угловой 2 эквивалент реагировать renderToString

ответ

Смежные вопросы