{"id":18471579,"url":"https://github.com/m310851010/dynamic-compile","last_synced_at":"2026-02-03T22:04:43.648Z","repository":{"id":181946547,"uuid":"667726505","full_name":"m310851010/dynamic-compile","owner":"m310851010","description":"把字符串动态编译成`angular`组件","archived":false,"fork":false,"pushed_at":"2023-07-18T07:06:02.000Z","size":180,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-10-05T13:47:50.903Z","etag":null,"topics":["angular","angular13","angular14","compile","dynamic","dynamic-compile","html","jit"],"latest_commit_sha":null,"homepage":"https://m310851010.github.io/dynamic-compile","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/m310851010.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2023-07-18T07:05:17.000Z","updated_at":"2023-07-18T15:32:30.000Z","dependencies_parsed_at":"2023-07-18T07:26:40.986Z","dependency_job_id":null,"html_url":"https://github.com/m310851010/dynamic-compile","commit_stats":null,"previous_names":["m310851010/dynamic-compile"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/m310851010/dynamic-compile","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/m310851010%2Fdynamic-compile","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/m310851010%2Fdynamic-compile/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/m310851010%2Fdynamic-compile/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/m310851010%2Fdynamic-compile/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/m310851010","download_url":"https://codeload.github.com/m310851010/dynamic-compile/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/m310851010%2Fdynamic-compile/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29059019,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-03T20:13:53.544Z","status":"ssl_error","status_checked_at":"2026-02-03T20:13:40.507Z","response_time":96,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angular13","angular14","compile","dynamic","dynamic-compile","html","jit"],"created_at":"2024-11-06T10:17:21.673Z","updated_at":"2026-02-03T22:04:43.612Z","avatar_url":"https://github.com/m310851010.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003edynamic-compile\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e把字符串动态编译成`angular`组件\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca aria-label=\"build status\" href=\"https://npmjs.com/package/@xmagic/dynamic-compile'\"\u003e\n    \u003cimg alt=\"\" src=\"https://img.shields.io/npm/v/@xmagic/dynamic-compile/latest.svg\"\u003e\n  \u003c/a\u003e\n  \u003ca aria-label=\"last commit\" href=\"https://www.github.com/angular/angular\"\u003e\n    \u003cimg alt=\"\" src=\"https://img.shields.io/badge/Build%20with-Angular%20CLI-red?logo=angular\"\u003e\n  \u003c/a\u003e\n\n  \u003ca aria-label=\"license\" href=\"https://m310851010.github.io/dynamic-compile/LICENSE\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/License-MIT-blue.svg\" alt=\"\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n## Demo\n\n[Live Demo](https://m310851010.github.io/dynamic-compile)\n\n## Installation\n\n### 1. Install\n\n```\nnpm install @xmagic/dynamic-compile --save\n```\n\n### 2. 在 `angular.json` 中禁用 `aot`\n\n```json\n{\n    \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:browser\",\n          \"options\": {\n            \"outputPath\": \"dist/test\",\n            \"index\": \"src/index.html\",\n            \"main\": \"src/main.ts\",\n            \"polyfills\": \"src/polyfills.ts\",\n            \"tsConfig\": \"tsconfig.app.json\",\n\n            // 此处改为 false\n            \"aot\": false,\n\n            \"assets\": [\n              \"src/favicon.ico\",\n              \"src/assets\"\n            ],\n            \"styles\": [\n              \"src/styles.scss\"\n            ],\n            \"scripts\": []\n          }\n    }\n}\n```\n\n### 🔨 Usage\n\n### import `DynamicCompileModule`。\n\n```diff\nimport { DynamicCompileModule } from '@xmagic/dynamic-compile';\n\n@NgModule({\n  imports: [\n+  DynamicCompileModule\n  ],\n  declarations: [TestComponent],\n})\nexport class TestModule { }\n```\n\n### Code\n\n```typescript\n@Component({\n  selector: 'app-test',\n  template: `\n    \u003cng-container [dynamic-compile]=\"html\" [data]=\"this\"\u003e\u003c/ng-container\u003e\n    \u003cng-container dynamic-compile [html]=\"html2\" [data]=\"this\"\u003e\u003c/ng-container\u003e\n    \u003cdiv [dynamic-compile]=\"html\" [data]=\"this\" [parent]=\"parentClass\"\u003e\u003c/div\u003e\n  `,\n  styleUrls: ['./dy.component.less']\n})\nexport class TestComponent {\n  list = [1, 2, 3];\n  html = `\u003cinput type=\"text\" *ngFor=\"let item of list\" [value]=\"item\"\u003e`;\n  html2 = `\u003cinput type=\"text\" *ngFor=\"let item of data.list\" [value]=\"item\"\u003e`;\n  parentClass = class TestParent implements OnInit, AfterViewInit {\n    constructor(public injector: Injector) {}\n\n    ngOnInit(): void {}\n    ngAfterViewInit(): void {}\n  };\n}\n```\n\n## 生产打包\n\n```bash\nng build --aot=false --build-optimizer=false\n```\n\n## API\n\n### Inputs\n\n| 属性              | 类型                                                                                     | 说明                                                                         |\n| ----------------- | ---------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------- |\n| `dynamic-compile` | string                                                                                   | html 模板, 任选其一                                                          |\n| `html`            | string                                                                                   | html 模板, 任选其一                                                          |\n| `selector`        | string                                                                                   | 选择器,默认随机生成                                                          |\n| `styles`          | string[]                                                                                 | 组件样式                                                                     |\n| `data`            | any                                                                                      | 传递给模板的上下文, 可以直接在模板中访问属性, 也可以通过 data 访问里面的属性 |\n| `parent`          | Type\u003cany\u003e                                                                                | 组件父类                                                                     |\n| `onCreated`       | (this: ComponentInstance\u003cT\u003e, component: ComponentInstance\u003cT\u003e, data: DataInfo\u003cT\u003e) =\u003e void | 组件被创建时的回调函数                                                       |\n| `onInit`          | (this: ComponentInstance\u003cT\u003e, component: ComponentInstance\u003cT\u003e, data: DataInfo\u003cT\u003e) =\u003e void | 组件生命周期 onInit                                                          |\n| `onDestroy`       | (this: ComponentInstance\u003cT\u003e, component: ComponentInstance\u003cT\u003e, data: DataInfo\u003cT\u003e) =\u003e void | 组件生命周期 onDestroy                                                       |\n| `onError`         | (error: Error) =\u003e void                                                                   | 发生错误处理函数                                                             |\n| `ngModule`        | NgModule                                                                                 | 模块配置, 默认导入了 CommonModule                                            |\n\nparent 类定义如下:\n\n```typescript\nclass TestParent {\n  constructor(public injector: Injector) {}\n}\n```\n\n你可以实现 ng 的生命周期,例如:\n\n```typescript\nclass TestParent implements OnInit, AfterViewInit {\n  constructor(public injector: Injector) {}\n\n  ngOnInit(): void {}\n  ngAfterViewInit(): void {}\n}\n```\n\n### License\n\nThe MIT License (see the [LICENSE](https://github.com/m310851010/dynamic-compile/blob/master/LICENSE) file for the full text)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fm310851010%2Fdynamic-compile","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fm310851010%2Fdynamic-compile","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fm310851010%2Fdynamic-compile/lists"}