在指令主机监听器中访问模板变量答案

【问题标题】：Accessing template variable in directive's host listener在指令主机监听器中访问模板变量
【发布时间】：2021-10-01 01:34:21
【问题描述】：

鉴于以下情况，是否可以从 onvalueChanged 主机侦听器中的模板访问“habitCellInfo”？

<div *dxTemplate="let habitCellInfo of 'habitEditCellTemplate'">
  <dx-select-box
    (onValueChanged)="
      onHabitEditorValueChanged($event, habitCellInfo)
    "
    [dataSource]="habitsDataSrc"
    [value]="habitCellInfo.data.habit"
    pimDxSelectBox
  >
    <dx-validator>
      <dxi-validation-rule
        pimDxiValidationRule
        rule="noun"
      ></dxi-validation-rule>
    </dx-validator>
  </dx-select-box>
</div>

import { DxSelectBoxComponent } from 'devextreme-angular';
import DataSource from 'devextreme/data/data_source';

import {
    Directive, ElementRef, HostListener, Input, NgModule, OnInit, Renderer2, Self
} from '@angular/core';
import { addSelectBoxCustomItem } from '@pim/common/shared-dx/util';

import { PimDxModules } from '../modules/pim-dx-modules.module';

@Directive({
    selector: '[pimDxSelectBox]',
})
export class PimDxSelectBoxDirective implements OnInit {
    @Input() acceptCustomValue = true
    @Input() dataSource!: DataSource
    

    // Inject an instance of select-box
    constructor(
        private elRef: ElementRef,
        @Self() private readonly selectBox: DxSelectBoxComponent,
        private renderer: Renderer2,
    ) {}

    ngOnInit(): void {
        this.selectBox.acceptCustomValue = this.acceptCustomValue
        this.selectBox.dataSource = this.dataSource
        this.selectBox.grouped = this.grouped
        
    }

    @HostListener('onValueChanged', ['$event'])
    editorValueChanged(e: Event) {
        // HOW DO I 
    }
}

【问题讨论】：

标签： angular angular2-directives

【解决方案1】：

向您的指令添加一个输入并从包含模板传递单元格信息。

在指令中：

@Input() pimDxSelectBox: any;

在包含组件中：

[pimDxSelectBox]="habitCellInfo"

【讨论】：