Динамический компонент добавления с использованием gridstack и angular2? JQuery $.parseHTML не работает

У меня есть 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 {}

Как я могу динамически добавить компонент причудливой кнопки?

Ответы

Ответ 1

Легким способом добавления динамического компонента fancy-button может быть следующее:

1) Добавить компонент в массив entryComponents вашего модуля

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

2) Получить root node из скомпилированного компонента

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

Здесь Пример плунжера для вашего случая

Если вы ищете что-то более сложное, тогда есть много ответов, где вы можете использовать компилятор angular, чтобы он работал

Ответ 2

Вам нужно использовать класс Angular 2s ViewContainerRef, который предоставляет удобный метод createComponent. ViewContainerRef можно неформально рассматривать как местоположение в DOM, где могут быть вставлены новые компоненты.

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

Вот пример рабочего плункера.

Или вы можете использовать общий HTML-outlete из этого сообщения