使用 gridstack 和 angular2 动态添加组件？ Jquery $.parseHTML 不起作用

Question

我有以下jsfiddle

我希望能够将我的自定义组件粘贴到特定的网格中（例如“”）

现在没有 Angular2，我只使用：

var el = $.parseHTML("<div><div class=\"grid-stack-item-content\" data-id=\""+id+"\"/><div/>");
this.grid.add_widget(el, 0, 0, 6, 5, true);

问题是，我不知道我该怎么做：

var el = $.parseAndCompileHTMLWithComponent("<div><div class=\"grid-stack-item-content\" data-id=\""+id+"\"/><fancy-button></fancy-button><div/>");
this.grid.add_widget(el, 0, 0, 6, 5, true);

在angular1中，我知道有一个compile，但是在angular2中，没有。

我的 fancy-button 组件很简单，如下所示：

@Component({
  selector: 'fancy-button',
  template: `<button>clickme</button>`
})
export class FancyButton {}

如何动态添加 fancy-button 组件？

Answer 1

您需要使用 Angular 2 的 ViewContainerRef class，它提供了一个方便的 createComponent 方法。可以非正式地将 ViewContainerRef 视为 DOM 中可以插入新组件的位置。

this.cmpRef = this.vcRef.createComponent(factory, 0, injector, []);

Here's a working plunker example.

或者您可以使用

中的通用 HTML 插座

Answer 2

动态添加 fancy-button 组件的最简单方法可能如下：

1) 将组件添加到模块的 entryComponents 数组中

@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent, GridStackComponent, FancyButtonComponent ],
  entryComponents: [ FancyButtonComponent ], // <== here
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

2)从编译组件中获取根节点

constructor(private vcRef: ViewContainerRef, private componentFactoryResolver: ComponentFactoryResolver) { }

getRootNodeFromParsedComponent(component) {
  const componentFactory = this.componentFactoryResolver.resolveComponentFactory(component);
  const ref = this.vcRef.createComponent(componentFactory, this.vcRef.length, this.vcRef.injector);
  const hostView = <EmbeddedViewRef<any>>ref.hostView;
  return hostView.rootNodes[0];
}

3)随处使用

const fancyBoxElement = this.getRootNodeFromParsedComponent(FancyBoxComponent);  
$('#someId').append(fancyBoxElement);

这是Plunker Example你的案例

如果您正在寻找更复杂的东西，那么有很多答案，您可以在其中使用 angular 编译器来完成它

使用 gridstack 和 angular2 动态添加组件？ Jquery $.parseHTML 不起作用

Dynamic add component using gridstack and angular2? Jquery $.parseHTML does not work

gridstack

angular