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

Question

已更新（因为我对问题的理解更好）：

我想根据用户点击的位置（table 行）显示一个组件，我使用的是 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 也无法找到它，并且通过 this.here 未定义

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


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

我想问题是，我可以动态设置@ViewChild 吗？

Answer 1

花了我很长时间。这里是 Stackblitz

它不完整并且有一些调整，但涵盖了这个问题中的所有内容。这是答案

的main source

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

Dynamically load component into dynamic position

javascript

angular

ng2-smart-table

angular-dynamic-components