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

我有以下几点

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

现在没有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=$.parseHTML（“”）；
这个.grid.add_小部件（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);

var el=$.parseAndCompileHTMLWithComponent（“”）；
这个.grid.add_小部件（el，0，0，6，5，true）；

在angular1中，我知道有编译，但在angular2中，没有编译

我的fancy button组件非常简单，如下所示：

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

@组件({
选择器：“花式按钮”，
模板：`点击我`
})
导出类FancyButton{}

---

如何动态添加fancy button组件？

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

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

---

或者您可以使用通用的HTML outlete from

动态添加

花式按钮

组件的easist方法可能如下所示：

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

1）将组件添加到模块的

entryComponents

数组中

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

这是给你的案子的

如果你在寻找更复杂的东西，那么有很多答案，你可以使用angular编译器来实现它

---

我不确定我是否理解你想做什么。目前gridstack仅支持angular 1。有很多DynamicComponentLoader线程，但这些答案并不相关，因为它已被弃用。@yuzui我尝试了这个示例，得到了这个结果。componentFactoryResolver.resolveComponentFactory不是函数error@rish你能给我点吃的吗？@yuzui thnx回复，@rish如果您想使用动态html创建组件，那么您必须使用

编译器

。我更新了你的plunker，你可以看到我得到了

HtmlElement

，并将它添加到

文档中。body

@yuzui thnx它真的对我很有帮助，这里只有一个问题，我们能在普通类中创建这两个方法吗？这个类没有[at]组件和[at]指令？

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