使用gridstack和angular2动态添加组件? jQuery $ .parseHTML不起作用 [英] Dynamic add component using gridstack and angular2? Jquery $.parseHTML does not work
问题描述
我有以下 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中,我知道有一个编译器,但是在angular2中,没有这样的东西.
我的精美按钮组件非常简单,如下所示:
@Component({
selector: 'fancy-button',
template: `<button>clickme</button>`
})
export class FancyButton {}
如何动态添加花式按钮组件?
动态添加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示例 >
如果您正在寻找更复杂的东西,那么有很多答案可以使用angular编译器来实现
- 动态加载现有组件Angular 2 Final Release
- 在Angular 2中相当于$ compile
- 我如何使用/创建动态模板以使用Angular 2.0编译动态组件?
- Angular 2.1.0创建子组件快速动态地
- 如何手动延迟加载模块?
I have the following jsfiddle
I want to be able to stick my custom component into a specific grid (e.g. "")
Right now without Angular2, I just use:
var el = $.parseHTML("<div><div class=\"grid-stack-item-content\" data-id=\""+id+"\"/><div/>");
this.grid.add_widget(el, 0, 0, 6, 5, true);
The issue is, I have no idea how I could do something like:
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);
In angular1, I know there is a compile, but in angular2, there is no such thing.
My fancy-button component is straightforward and is as follows:
@Component({
selector: 'fancy-button',
template: `<button>clickme</button>`
})
export class FancyButton {}
How can I dynamically add the fancy-button component?
The easist way to add fancy-button
component dynamically might be as follows:
1) Add component to entryComponents
array of your module
@NgModule({
imports: [ BrowserModule ],
declarations: [ AppComponent, GridStackComponent, FancyButtonComponent ],
entryComponents: [ FancyButtonComponent ], // <== here
bootstrap: [ AppComponent ]
})
export class AppModule { }
2) Get root node from compiled component
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) Use it anywhere
const fancyBoxElement = this.getRootNodeFromParsedComponent(FancyBoxComponent);
$('#someId').append(fancyBoxElement);
Here's Plunker Example for your case
If you're looking for something more complicated then there are a lot of answers where you can use angular compiler to do it working
- Load existing components dynamically Angular 2 Final Release
- Equivalent of $compile in Angular 2
- How can I use/create dynamic template to compile dynamic Component with Angular 2.0?
- Angular 2.1.0 create child component on the fly, dynamically
- How to manually lazy load a module?
这篇关于使用gridstack和angular2动态添加组件? jQuery $ .parseHTML不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!