将组件动态加载到动态位置

时间:2019-05-07 03:41:56

标签: javascript angular ng2-smart-table angular-dynamic-components

更新(据我所知,这个问题比较好):

我想根据用户单击的位置(哪个表行)显示一个组件,我正在使用ng2-smart-table,现在的问题是没有选择器可以动态加载该组件。 在我的情况下,它是行的按钮父级。

每行都有一个打开按钮

onOpen(event) {
 var selectedRow = event.target.closest(".ng2-smart-row");
 const newRow = document.createElement('tr');
    newRow.innerHTML = `
    <div #here></div>
  `;
selectedRow.insertAdjacentHTML('afterend', newRow.innerHTML);
}

现在,尽管打开工程有效,ViewChild似乎找不到它,createCompoenent并没有找到它。这里是未定义的

@ViewChild('entry', {read: ViewContainerRef}) entry:ViewContainerRef;


const openerFactory = this.componentFactoryResolver.resolveComponentFactory(OpenActivityComponent);
const component = this.here.createComponent(openerFactory);

我想问题是,我可以动态设置@ViewChild吗?

1 个答案:

答案 0 :(得分:0)

花了我很长时间。这是Go Playground

它并不完整,需要一些调整,但涵盖了此问题中的所有内容。这是答案的Stackblitz