Angular (2 & 4) 从指令访问模板变量引用答案

【问题标题】：Angular (2 & 4) Access template variable reference from DirectiveAngular (2 & 4) 从指令访问模板变量引用
【发布时间】：2017-09-27 15:08:04
【问题描述】：

我有一个指令，其目标是在前缀字段文本组件下添加一个建议列表。这个组件基本上是一个搜索栏。

我的指令目前看起来像这样（在我的所有代码片段中，我删除了导入以增加可读性）：

@Directive({
    selector: '[prefixSuggest]',
    exportAs: 'prefixSuggest',
    host: {
      'class': 'prefix-field-suggest__container'
    }
  })
  export class PrefixFieldSuggestDirective implements AfterViewInit {

    private componentReference: ComponentRef<PrefixFieldSuggestComponent>;

    @Input() fieldTextRef: ElementRef;
    @Input() list: Array<PrefixSuggestLineInterface>;
    @ViewChild('fieldTextRef', {read: ViewContainerRef}) fieldTextContainer;

    constructor(private _injector: Injector, private resolver: ComponentFactoryResolver) {
        this.resolver.resolveComponentFactory(PrefixFieldSuggestComponent);
    }

    ngAfterViewInit(): void {
        const prefixFieldSuggestFactory = this.resolver.resolveComponentFactory(PrefixFieldSuggestComponent);
        this.componentReference = prefixFieldSuggestFactory.create(this._injector);
        this.componentReference.instance.list = this.list;
        this.fieldTextContainer.insert(this.componentReference.hostView);
    }
  }

我的组件看起来像这样：

@Component({
  selector: 'prefix-field-suggest',
  templateUrl: './prefix-field-suggest.component.html',
  styleUrls: ['./prefix-field-suggest.component.scss']
})
export class PrefixFieldSuggestComponent {

    /** Item list to display */
    @Input() list: Array<PrefixSuggestLineInterface>;

    /** Search string typed in search input */
    @Input() searchTerm: string;

    /** Input ID to align itself beneath */
    @Input() inputId: string;

    /** Offset between the suggest and the input; default 0 */
    @Input() offset: number = 0;

    /** Event when an item is selected */
    @Output() itemSelected: EventEmitter<any>;
}

PrefixFieldSuggestComponent 的模板文件：

<div class="prefix-field-suggest" 
    [ngStyle]="{ 'top': offset + 'px'}">
    <span *ngFor="let item of list">
        {{item.title | prefixBoldifyTerm:searchTerm}} {{item.metaData}}
    </span>
</div>

PrefixSuggestLineInterface 只是一个合同接口，因此我团队中的不同人员可以根据他们想要在其中显示的信息来实施他们自己的建议行。 ATM 它基本上是 2 个字符串字段。

问题： 我想从我的指令访问前缀字段扩展（搜索栏）组件的 ViewContainerRef。我尝试了很多东西，例如#[fieldTextRef]、#[fieldTextRef]="mysearchbar"、fieldTextRef 等......

我在这个简单的页面上尝试了这些可能性：

 <div class="prefix-search-group">
          <prefix-field-text prefixSuggest #fieldTextRef="prefixSuggest" list="list" [identifier]="search"></prefix-field-text>
 </div>

但在任何情况下，我的 fieldTextRef 输入始终为空。（因为它不是子元素）。甚至有可能做我想做的事吗？

非常感谢您的启发。

【问题讨论】：

prefix-field-text 组件在哪里？ prefix-field-suggest 和 searchBar 有什么关系？
您的模板中的prefix-field-suggest 在哪里？
你能在 plunker 上提供一个最小的复制吗？
实际上我不能，因为我们使用我们自己的库并将其发布到私有 NPM 注册表。但我承认我不够清楚。我会更新主题并回答你：搜索栏实际上是前缀字段建议。它是一个自定义组件，由输入和自定义样式以及一些参数组成。
您可以在 plunker 中重新创建相同的情况。我没有要求显示所有代码

标签： html angular typescript

【解决方案1】：

如果您想为<prefix-field-text prefixSuggest 获取ViewContainerRef，只需将其注入构造函数prefixSuggest 指令中，因为它应用于同一元素：

export class PrefixFieldSuggestDirective implements AfterViewInit {
  constructor(private fieldTextContainer: ViewContainerRef,...) {}

【讨论】：