使用 Angular2 实现电子邮件通讯

Question

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

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

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

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

************************ 2017 年 9 月 21 日晚上 8 点更新 **************** *****

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

************************ 2017 年 9 月 23 日晚上 8 点更新 **************** *****

正在寻找 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
*/