如何以编程方式访问元素的指令数据？

问题描述

我有一个具有ng-content的组件。我想触发所述组件的功能。

html：

<ng-template #templateRef>
  <ng-content>
  </ng-content>
</ng-template>

component.ts


export class OverlayDropdownComponent implements AfterViewInit {

  @ViewChild('templateRef')
  public ref: TemplateRef<any>;

  // some values

  constructor(private overlay: Overlay,private overlayPositionBuilder: OverlayPositionBuilder,private componentRef: ElementRef) {
  }
  

  public show(): void {
    // not important
  }

  ngAfterViewInit(): void {
     // not important
  }

  // important Part !!
  public activate(event: Event): void {
    const ele = event.target;
    console.log(ele);
    // here i want to acces the date from the Directive of the button
    // here i want to do something like this pseudo code: 
    const directive: ValueItemDirective = DirectiveResolver.resolveFromHtml(ele,ValueItemDirective);
    console.log(directive.itemValue);

  }

}

cosole.log如下：

<button _ngcontent-knr-c31="" appvalueitem="" ng-reflect-value-item="[object Object]">TestLabel</button>

我要访问ng-reflect-value-item="[object Object]"数据。

在其他组件中，我像这样使用“ overlaydropdowncomponent”：

<app-overlay-dropdown [(selection)]="value" #dropdown>
  <div class="appear-o" style="background-color: aquamarine;">
    <div>Holla</div>
    <div style="display: grid; grid-template-columns: 1fr;">
      <button appValueItem [valueItem]="data" (click)="dropdown.action($event)">{{data.label}}
      </button>
    </div>
  </div>
</app-overlay-dropdown>

指令


@Directive({
  selector: '[appValueItem]'
})
export class ValueItemDirective {

  @input()
  public valueItem: any;

}

我想给Button提供一些数据，而不要将其传递给函数。但反而，我想访问指令，然后从那里获取数据。

appValueItem [valueItem]="data"

如何从HTML元素中提取/解析ng指令数据？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

angular angular-directive angular2-directives