Question

我有一个角度1.x应用程序，它使用动态布局。该应用程序接收带有屏幕元数据的布局json，并简单地生成已编译的组件并创建一个屏幕。

相关的“重要代码”如下所示：

const element = this.$compile(`<${this.control.type} control="control" data="data"></${this.control.type}>`)(scope);
this.$element.replaceWith(element);

现在，我正在尝试将其迁移到Angular 5，我知道Angular 5删除了DOM操作和$ compile功能。

我四处搜索并找到了解如何渲染动态html的解决方案（例如{{1 + 1}}）和其他已弃用的东西（在Angular 5之前），但找不到适合渲染的动态制作组件（并处理它们的内部绑定）。

有什么方法可以实现这种功能

Answer 1

这是像你自己一样创建一个组件的方法，比如angularJS :(不要忘记销毁它！在componentRef上调用destroy（）来做到这一点）

父组件：

@ViewChild('componentHolder', { read: ViewContainerRef }) componentHolder: ViewContainerRef;

constructor(private componentFactoryResolver: ComponentFactoryResolver) { }
public createComponent(): void {
          const componentFactory = this.componentFactoryResolver.resolveComponentFactory(MyComponent);
          const componentRef = this.componentHolder.createComponent(componentFactory);
}

父组件HTML：

<button (click)="createComponent()">Add New MyComponent below</button>
<div #componentHolder ></div>

在NgModule中添加MyComponent：

...
  imports: [
    BrowserModule,
    FormsModule,
    RouterModule.forRoot(appRoutes),
  ],
  entryComponents: [
    MyComponent
  ],...

编译＆amp;使用Angular 5

1 个答案: