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

Posted 2023-02-22

【中文标题】TS中的Angular 2访问指令返回未定义

【英文标题】：Angular 2 Accessing directive in TS returns undefined

【发布时间】：2018-07-12 08:40:06

【问题描述】：

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

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

我按照他们的示例从指令中获取 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;
  

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

和父容器（sn-p）：

<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''。我试过在指令上使用 exportAs 并引用它，不行。我尝试在指令名称上使用 ViewChildren，返回 0 结果。我已经从 div 中删除了 [hidden] 属性（因为我记得另一篇引用 *ngIf 的帖子），但这不起作用。所有这些都是在加载 DOM 之后发生的（当用户单击按钮时按需）。有任何想法吗？谢谢！

编辑：声明如下：

@ViewChild(ItemPreviewDirective) itemPreviewHost: ItemPreviewDirective;

【问题讨论】：

你能告诉我们为itemPreviewHost属性赋值的代码吗？

我用我声明 itemPreviewHost 的方式更新了主帖。否则，我没有在上面那个函数之外使用过那个属性。

【参考方案1】：

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

'[k8ItemPreviewHost]'

到

'[k8-item-preview-host]'

【讨论】：

谢谢。作为一个 Angular 的新手，我觉得它有点奇怪。