如何使用角度2或4或5中的name属性获取dom元素

Question

我有一个模板，里面有多个image（img）标记，所有这些都在foreach循环中进行了迭代，并在打字稿文件中修改了img src属性。

HTML代码：

<div *ngFor="let lt of list">
<div>
    <a href="{{lt.url}}" target="_self">
      <img mat-card-image name="{{lt.name}}" class="image" src="" placement="top" container="body">
    </a>
</div>
<div>
    <a href="{{lt.url}}" target="_self">
      <img mat-card-image name="{{lt.name}}" class="image" src="" placement="top" container="body">
    </a>
</div>
<div>
    <a href="{{lt.url}}" target="_self">
      <img mat-card-image name="{{lt.name}}" class="image" src="" placement="top" container="body">
    </a>
</div>
</div>

打字稿文件中的代码，

ngOnInit() {
    for (const lt of list) {
        if (lt.title === 'xyz') {
          lt.title = 'XYZ';
        }
        if (lt.appFlag) {
          this.getIcon(lt.name);
        }
    }
}


  private getIcon(name: string): void {
  const imageUrl = this.service.createURL('abc');

  // how to get img tag using property/attribute name(name here is unique item name) from HTML without using document.querySelector etc.
  ....
  ....
  //const img = this.name.nativeElement.name;

  //console.log('inside getIcon:img', img);


  if (img) {
    img['src'] = imageUrl;
  }
});
}

Answer 1

您可以通过创建directive并附加您的元素来获得访问权限，下面是该代码，下面的指令使用ElementRef ，这又允许您与nativeHtml元素进行交互。

---

ImageElementDirective

import { ElementRef } from '@angular/core';
import { Directive } from '@angular/core';

@Directive({
  selector:"[imageElement]"
})
class ImageElement {
  constructor(private el: ElementRef) {
  }

  getImage() : any {
    return el.nativeElement;
  }
}

Component.ts

//this will give you all image element , 
//you should use for loop or foreach to perform operation 
//you want
@ViewChildren(ImageElement) allImageElement; 

Component.html

<img imageElement ..rest>
<img imageElement ..rest>