Comment cibler cet attribut HTML de composant, est-il un moyen plus facile d'obtenir cet élément?

Question

Comment cibler 'this' composant html attribut elementRef.nativeElement.querySelector ('. Content-img')?

y a-t-il un meilleur moyen que de faire nativeElement.querySelector?

J'ai un composant et une entrée.

De l'entrée je cible la fonction de composant qui est je voudrais imgChange() Dans imgChange() pour cibler cet élément de composant '' et obtenir .offsetWidth

app.ts

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

image-component.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; 

} 

} 

Answer 1

Utilisez ViewChild. Dans votre situation, vous shoul faire comme

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

}) 

et dans votre classe Déclarez une variable locale avec l'annotation ViewChild,

@ViewChild('contentImg') contentImg;