angular6解析動態字串模板

依賴：

1. Compiler服務
2. viewContanierRef服務

步驟：

1. 建立指令，並通過指令接受字串
2. 接受字串，並通過此字串動態建立元件及模組
3. compiler服務解析元件和模組
4. 通過將解析出來的元件新增到dom容器中
   程式碼：

**指令程式碼：**

import {Compiler, Component, Directive, Input, NgModule, OnChanges, OnInit, TemplateRef, ViewContainerRef} from '@angular/core';
import {DynamicModuleModule} from './dynamic-module/dynamic-module.module';
@Directive({
  selector: '[appTestDirective]'
})
export class TestDirectiveDirective implements OnChanges {

  constructor(public viewContaier: ViewContainerRef, private myCompiler: Compiler) {
  }
//接受字串
  @Input()
  appTestDirective: string;

  ngOnChanges(): void {
  //在dom容器中新增元件並顯示
    this.createDynamicCmd().then((cmdFac)=>{
       this.viewContaier.createComponent(cmdFac);
    })
  }
//動態建立元件
  createDynamicCmd() {
    if (!this.appTestDirective) return;
    let father=this;
    @Component({
      template: father.appTestDirective,
    })
    class dynamicComponent {
    }

    @NgModule({
      imports:[DynamicModuleModule],
      declarations: [dynamicComponent]
    })
    class dynamicModule {
    }
    return this.myCompiler.compileModuleAndAllComponentsAsync(dynamicModule).then(moduleWithCmd=>{
       return moduleWithCmd.componentFactories.find((cmdFac)=>{
         return cmdFac.componentType===dynamicComponent
       })
    })
  }
}

 

**html程式碼**
<div>
<ng-template [appTestDirective]="template"></ng-template>
</div>

**控制器程式碼**
template:string=`<div><app-test-component2></app-test-component2></div>`;