@xmagic/dynamic-compile v13.0.1

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

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)