使用Angular2通过电子邮件发送电子邮件

Question

我正在尝试创建电子邮件简报工具，其中包括管理内容的前端以及将html作为电子邮件发送。

我要做的是为UI维护一个角度模板并作为电子邮件发送。此模板还有一些IE特定注释，以使其在Outlook中工作。模板可以包含不同的html和样式，但数据保持不变。

这就是我的开始。 https://plnkr.co/edit/NiYAopyCyFQyBK4aER5v?p=preview

1. 我面临的挑战是如何使用数据编译html并渲染到UI
2. 如何在没有ngif ngfor comments的情况下获取干净的html以将其作为电子邮件发送。



**********************更新9/21/2017 8pm ****************** ***

能够解决第一次挑战。更新了plnkr

**********************更新9/23/2017 8pm ****************** ***

正在寻找compiling html string with data的正确方法。不得不采取这种方法有一些限制 https://github.com/tomalex0/compile-ng2-template

我正在寻找与angular2中的https://www.npmjs.com/package/angular-template类似的东西。

Answer 1

能够按预期工作。不得不将某些逻辑移到服务器端。

结帐plnkr和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[\s\S]*?(?:-->)/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
*/