Dynamiczne dodawanie komponentów za pomocą gridstack i angle2? JQuery $ .parseHTML nie działa

Question

Mam następujący jsfiddle

Chcę być w stanie trzymać mój własny komponent do określonej sieci (na przykład „”)

Teraz bez Angular2, po prostu użyć:

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

problem jest, nie mam pojęcia, jak mógłby zrobić coś takiego:

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); 

w gular1, wiem, że istnieje kompilacja, ale w kanale 2 nie ma czegoś takiego.

Moja wyobraźnia przycisk składnikiem jest prosta i brzmi następująco:

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

Jak można dynamicznie dodać komponent fantazyjne przyciskami?

Answer 1

easist sposób dodać fancy-button komponent dynamicznie może być następująca:

1) Dodaj komponent do entryComponents Tablica modułu

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

2) Pobierz węzeł główny ze skompilowanego komponentu

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) Użyj go nigdzie

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

Oto Plunker Example Twoim przypadku

Jeśli szukasz czegoś bardziej skomplikowanego to istnieje wiele odpowiedzi, gdzie można użyć kompilatora kątowego, aby to zrobić działa

• 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?

Answer 2

Należy użyć klasy ViewContainerRef Angular 2, która zapewnia przydatną metodę createComponent. ViewContainerRef można nieformalnie myśleć o lokalizacji w DOM, gdzie można wstawiać nowe komponenty.

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

Here's a working plunker example.

Albo można użyć rodzajowego outlete HTML z this post