时间戳

首页 > 解决方案 > 将组件动态加载到动态位置

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

问题描述

更新（因为我更好地理解了这个问题）：

我想根据用户单击的位置（哪个表格行）显示一个组件，我正在使用 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);
}

现在虽然 open 有效，但ViewChild似乎找不到它，并且通过createCompoenentthis.here 是未定义的

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


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

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

标签： javascriptangularng2-smart-tableangular-dynamic-components

解决方案

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

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

推荐阅读