如何定位这个组件的 HTML 属性，有没有更简单的方法来获取这个元素？

Posted 2023-02-23

【中文标题】如何定位这个组件的 HTML 属性，有没有更简单的方法来获取这个元素？

【英文标题】：How to target this component HTML attribute, is there a easier way to get this element?

【发布时间】：2017-11-13 01:55:48

【问题描述】：

如何定位'this'组件html属性elementRef.nativeElement.querySelector('.content-img')？

有没有比做 nativeElement.querySelector 更好的方法？

我有一个组件和一个输入。

从输入中我定位到组件函数 imgChange() 在 imgChange() 我想定位那个组件元素 '' 和 get .offsetWidth

app.ts

<image-component #Img format="png"></image-component>
<input (change)="Img.imgChange($event)" type="file">

图像组件.ts

@Component(
  template: `
       <ng-content></ng-content>
      <div class="content-img"></div>

)
export class ResizingCroppingImagesComponent
  public elementRef; 
    public _format = 'jpeg';
    public img = null;
    public sizeW = 230;
    public sizeH = 150;
    public sizeWmax = 720;
    public sizeHmax = 720;
    public stateMouse = false;
    public stateType = 'none';
    public stateR = 'none';
    public centerX = 0;
    public centerY = 0;
    public percent = 100;
    public imgUrl = null;
    public _top = 0;
    public _left = 0;
    public _img = ;
    public _src = null;

    public imgDataUrl;
    public origImg;
    public imgWidth;
    public imgHeight;

imgChange(event) 

  const _this = this;
  const fileReader = new FileReader();
  fileReader.onload = ev =>  

  _this._left = (_this.elementRef.nativeElement.querySelector('.content-img').offsetWidth / 2) -  _this.imgWidth / 2;

【参考方案1】：

使用 ViewChild。在你的情况下，你应该喜欢

@Component(
  template: `
       <ng-content></ng-content>
      <div #contentImg class="content-img"></div>

)

并在你的类中声明一个带有 ViewChild 注释的局部变量，

@ViewChild('contentImg') contentImg;