Question

我尝试使用指令获取nativeElement。这是我的指示：

import { Directive, ElementRef } from "@angular/core";
...

@Directive({
    selector: '[someData]',
    exportAs: 'someData'
})

export class MyDirective {
    constructor(private elRef: ElementRef) {

    }
}

我的模板如下所示：

<div *ngFor="let note of notes;let index;">
 ...
 <div someData #text="someData">
   ...
 </div>
 <button (click)="showNative()">click me </button>
</div>

我的组件：

export class MyComponent {
 ...
  @ViewChild('data') data: any;
 ...
    showNative(): void {
        console.log( this.data );
    }
}

当我点击第一个按钮或第二个按钮时，我在我的控制台中只看到一个对象，它是第一个nativeElement，但我需要这样的东西：

单击第一个按钮 - 我想查看第一个对象单击第二个按钮 - 我想看到第二个对象等等。

我知道我必须在func＆＃34; showNative＆＃34;中传递ID或链接，但我不知道怎么......

Answer 1

如果您只想获取指令的元素，只需将本地模板引用传递给showNative调用：

<div someData #text>
...
button (click)="showNative(text)">click me </button>

showNative(element): void {
   console.log( element );
}

此外，如果您需要使用@ViewChild或@ViewChildren获取指令实例，您可以使用如下指令类：

@ViewChildren(MyDirective) children: QueryList(MyDirective);

从指令获取nativeElement

1 个答案: