Package Exports

@xmagic/dynamic-compile
@xmagic/dynamic-compile/index.ts

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@xmagic/dynamic-compile) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

dynamic-compile

把字符串动态编译成`angular`组件

Demo

Live Demo

Installation

1. Install

npm install @xmagic/dynamic-compile --save

2. 在 `angular.json` 中禁用 `aot`

{
    "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/test",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",

            // 此处改为 false
            "aot": false,

            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.scss"
            ],
            "scripts": []
          }
    }
}

🔨 Usage

import `DynamicCompileModule`。

import { DynamicCompileModule } from '@xmagic/dynamic-compile';

@NgModule({
  imports: [
+  DynamicCompileModule
  ],
  declarations: [TestComponent],
})
export class TestModule { }

Code

@Component({
  selector: 'app-test',
  template: `
    <ng-container [dynamic-compile]="html" [data]="this"></ng-container>
    <ng-container dynamic-compile [html]="html2" [data]="this"></ng-container>
    <div [dynamic-compile]="html" [data]="this" [parent]="parentClass"></div>
  `,
  styleUrls: ['./dy.component.less']
})
export class TestComponent {
  list = [1, 2, 3];
  html = `<input type="text" *ngFor="let item of list" [value]="item">`;
  html2 = `<input type="text" *ngFor="let item of data.list" [value]="item">`;
  parentClass = class TestParent implements OnInit, AfterViewInit {
    constructor(public injector: Injector) {}

    ngOnInit(): void {}
    ngAfterViewInit(): void {}
  };
}

生产打包

ng build --aot=false --build-optimizer=false

API

Inputs

属性	类型	说明
`dynamic-compile`	string	html 模板, 任选其一
`html`	string	html 模板, 任选其一
`selector`	string	选择器,默认随机生成
`styles`	string[]	组件样式
`data`	any	传递给模板的上下文, 可以直接在模板中访问属性, 也可以通过 data 访问里面的属性
`parent`	Type	组件父类
`onCreated`	(this: ComponentInstance, component: ComponentInstance, data: DataInfo) => void	组件被创建时的回调函数
`onInit`	(this: ComponentInstance, component: ComponentInstance, data: DataInfo) => void	组件生命周期 onInit
`onDestroy`	(this: ComponentInstance, component: ComponentInstance, data: DataInfo) => void	组件生命周期 onDestroy
`onError`	(error: Error) => void	发生错误处理函数
`ngModule`	NgModule	模块配置, 默认导入了 CommonModule

parent 类定义如下:

class TestParent {
  constructor(public injector: Injector) {}
}

你可以实现 ng 的生命周期,例如:

class TestParent implements OnInit, AfterViewInit {
  constructor(public injector: Injector) {}

  ngOnInit(): void {}
  ngAfterViewInit(): void {}
}

License

The MIT License (see the LICENSE file for the full text)

@xmagic/dynamic-compile