Estoy tratando de crear una herramienta de boletín de correo electrónico que incluya una interfaz para administrar el contenido y enviar el html como correo electrónico.
Lo que trato de hacer es mantener una plantilla angular para la interfaz de usuario y enviarla como correo electrónico. Esta plantilla también tiene algunas IE comentarios específicos para que funcione en Outlook. La plantilla puede contener diferentes HTML y estilos, pero los datos siguen siendo los mismos.
Esto es lo que comencé. https://plnkr.co/edit/NiYAopyCyFQyBK4aER5v?p=preview
- El desafío al que me enfrento es cómo compilar html con datos y representarlo en la interfaz de usuario
- Cómo obtener html limpio sin
ngif ngfor commentspara enviarlo como correo electrónico.
********************** Actualización 21/09/2017 8 p.m. ********************
Pude resolver el primer desafío. Plnkr actualizado
********************** Actualización 23/09/2017 8 p.m. ********************
Estaba buscando una forma adecuada de compiling html string with data. Tuve que ir con este enfoque con algunas limitaciones.
https://github.com/tomalex0/compile-ng2-template
Estoy buscando algo similar a esto. https://www.npmjs.com/package/angular-template en angular2.
Respuestas
0 para la respuesta № 1Pude hacer que funcionara como esperaba. También tuve que mover cierta lógica al lado del servidor.
Revisa plnkr y github
https://plnkr.co/edit/NiYAopyCyFQyBK4aER5v?p=preview
https://github.com/tomalex0/compile-ng2-template
import { Component, Component,
ViewChild, ViewContainerRef, ComponentRef, NgModuleRef,ElementRef,
Compiler, ComponentFactory, NgModule, ModuleWithComponentFactories, ComponentFactoryResolver } from "@angular/core";
import { CommonModule } from "@angular/common";
import { FormsModule } from "@angular/forms";
@Component({
selector: "my-app",
templateUrl: "./app.component.html"
})
export class AppComponent {
@ViewChild("container", { read: ViewContainerRef })
container: ViewContainerRef;
constructor(
private componentFactoryResolver: ComponentFactoryResolver,
private compiler: Compiler
) {
}
htmlstring : string;
data = {
title : "Newsletter",
list : [{
name : "One"
},{
name : "Two"
}],
enabled : true
};
templateArr = [{
name : "t1",
displayName : "Template1",
html : `<div>
<h1>Template 1</h1>
<h2>{{data.title}}</h2> <input name="title" type="text" [(ngModel)]="data.title" />
<div>
<li *ngFor="let listitem of data.list; let index = index">
List item {{listitem.name}}
</li>
</div>
<!--[if (gte mso 9)|(IE)]>
<div>Internet Explorer</div>
<![endif]-->
<div *ngIf="data.enabled">Enabled</div>
<div *ngIf="!data.enabled">Not Enabled</div>
</div>`
},{
name : "t2",
displayName : "Template2",
html : `<div>
<h1>Template 2</h1>
<h2>{{data.title}}</h2> <input name="title" type="text" [(ngModel)]="data.title" />
<div>
<li *ngFor="let listitem of data.list; let index = index">
List item {{listitem.name}}
</li>
</div>
<!--[if (gte mso 9)|(IE)]>
<div>Internet Explorer</div>
<![endif]-->
<div *ngIf="data.enabled">Enabled</div>
<div *ngIf="!data.enabled">Not Enabled</div>
</div>`
}]
name = "Angular Newsletter";
loadTemplate (item) {
console.log(item.html)
let metadata = {
selector: `runtime-component-dynamic`,
template: item.html
};
let factory = this.createComponentFactorySync(this.compiler, metadata);
if (this.componentRef) {
this.componentRef.destroy();
this.componentRef = null;
}
this.componentRef = this.container.createComponent(factory);
this.componentRef.instance.data = this.data;
}
private createComponentFactorySync(compiler: Compiler, metadata: Component): ComponentFactory<any> {
let decoratedCmp = Component(metadata)(class { });
@NgModule({ imports: [CommonModule, FormsModule], declarations: [decoratedCmp] })
class RuntimeComponentModule { }
compiler.clearCacheFor(decoratedCmp);
let module: ModuleWithComponentFactories<any> = compiler.compileModuleAndAllComponentsSync(RuntimeComponentModule);
return module.componentFactories.find(f => f.componentType === decoratedCmp);
}
sendMail (){
this.htmlstring = this.componentRef.location.nativeElement.innerHTML;
this.htmlstring = this.htmlstring.replace(/<!--bindings[sS]*?(?:-->)/g, "");
}
}
/*
Copyright 2017 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/