Question

我正在尝试使用类似于此处示例的动态组件：https://angular.io/guide/dynamic-component-loader

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

我按照他们的例子从指令中获取了viewContainerRef但不幸的是，该指令是未定义的。这是我得到的：

项-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;
  }
}

项-preview.directive.ts

import { Directive, ViewContainerRef } from '@angular/core';

@Directive({
  selector: '[k8ItemPreviewHost]',
})
export class ItemPreviewDirective {
  constructor(public viewContainerRef: ViewContainerRef) { }
}

要注入的模板：

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;
}

父容器（代码段）：

<div class="preview-body" id="learnosity-content-body" [hidden]="hideResults">
    <ng-template k8-item-preview-host></ng-template>
</div>

非常准确，但我只想要基本框架，所以我可以通过示例了解在修改应用程序之前的工作原理。不幸的是，当它遇到这一行时：

const viewContainerRef = this.itemPreviewHost.viewContainerRef;

它表示'无法读取属性'viewContainerRef'为undefined'。我已经尝试在指令上使用exportAs并引用它，不用了。我已尝试在指令名称上使用ViewChildren，返回0结果。我从div中删除了[hidden]属性（因为我记得另一个引用* ngIf的帖子），但是没有用。所有这些都发生在加载DOM之后（当用户单击按钮时按需）。有任何想法吗？谢谢！

编辑：声明如下：

@ViewChild(ItemPreviewDirective) itemPreviewHost: ItemPreviewDirective;

Answer 1

找到解决方案：我的指令选择器使用驼峰情况（lint警告）而不是虚线表示法。所以我从

改变了它

'[k8ItemPreviewHost]'

到

'[k8-item-preview-host]'

TS中的Angular 2 Accessing指令返回undefined

1 个答案: