将组件动态加载到动态位置
Dynamically load component into dynamic position
已更新(因为我对问题的理解更好):
我想根据用户点击的位置(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 吗?
花了我很长时间。这里是 Stackblitz
它不完整并且有一些调整,但涵盖了这个问题中的所有内容。这是答案
的main source
已更新(因为我对问题的理解更好):
我想根据用户点击的位置(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 吗?
花了我很长时间。这里是 Stackblitz
它不完整并且有一些调整,但涵盖了这个问题中的所有内容。这是答案
的main source