ngx-amis-demo #11887
Description
实现场景：
我们产品框架使用的ngx开发产品，官方没有提供ngx Demo参考，我们需要在目前产品上集成 amsi功能，目前已经完成了集成
- amis 模块，做json渲染
- amis-editor 模块，做在线编辑器
存在的问题：
在ng16版本集成并完成功能演示，没有合并到正式项目做进一步部署测试
当前方案：
- 渲染器：动态加载脚本，这里加载脚本和Vue版本做了统一，原理一致
const script = document.createElement("script");
script.setAttribute("type", "text/javascript");
script.setAttribute("src", src);
script.onload = () => callback();
script.onerror = () => {
console.error('Failed to load SDK!');
};
document.body.appendChild(script);
}- 编辑器：基于amis-editor模块，主要组件声明周期确保DOM加载完成，注意卸载
constructor(private el: ElementRef) {}
ngAfterViewInit() {
ReactDOM.render(
React.createElement(Editor, {
value: this.value,
onChange: (value: any) => this.value = value
}),
this.el.nativeElement.querySelector(`#${this.editorId}`)
);
}
ngOnDestroy() {
ReactDOM.unmountComponentAtNode(this.el.nativeElement.nativeElement);
}
