TS中的Angular 2访问指令返回未定义

我正在尝试创建一个类似于此处示例的动态组件：

我必须根据第三方要求动态添加/删除子组件。（它注入到我的页面上的特定元素）

我按照他们的示例从该指令获取viewContainerRef，但不幸的是，该指令未定义。以下是我得到的：

items-preview.component.ts：

generateBody(items: Item[]) {

  for (const item of items) {
    const previewItem: ItemPreviewItem = new ItemPreviewItem(ItemPreviewTemplateComponent, {});

    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(previewItem.component);

    const viewContainerRef = this.itemPreviewHost.viewContainerRef;
    viewContainerRef.clear();

    const componentRef = viewContainerRef.createComponent(componentFactory);
    (<ItemPreviewTemplateComponent>componentRef.instance).data = previewItem.data;
  }
}

以及要注入的模板：

import { Component, Input } from '@angular/core';


@Component({
  template: `
    <div class="job-ad">
      <h4>Headline goes here!</h4> 

      Body goes here!
    </div>
  `
})
export class ItemPreviewTemplateComponent {
  @Input() data: any;
}

它表示“无法读取未定义的”属性“viewContainerRef”。我试着在指令中使用exportAs并引用它，没有成功。我尝试在指令名上使用ViewChildren，返回0个结果。我已经从div中删除了[hidden]属性（我记得另一篇文章引用了*ngIf），但这不起作用。所有这些都是在加载DOM之后发生的（当用户单击按钮时按需）。有什么想法吗？谢谢

编辑：声明如下：

@ViewChild(ItemPreviewDirective) itemPreviewHost: ItemPreviewDirective;

---

找到了解决方案：我的指令选择器使用驼峰大小写（lint警告）而不是虚线符号。所以我把它从

'[k8ItemPreviewHost]'

到

---

你能给我们看一下分配给

itemPreviewHost

属性值的代码吗？我用声明itemPreviewHost的方式更新了主帖。否则，我没有使用上述函数之外的属性。谢谢。作为一个棱角分明的新手，我觉得这有点奇怪。

const viewContainerRef = this.itemPreviewHost.viewContainerRef;

@ViewChild(ItemPreviewDirective) itemPreviewHost: ItemPreviewDirective;

'[k8ItemPreviewHost]'

'[k8-item-preview-host]'