Tentative d'obtention des dimensions de l'image avec la directive

Question

J'ai un point de terminaison qui renvoie une URL d'image pour moi. Je veux afficher dans un composant et avoir une étiquette sous l'image pour montrer les dimensions de l'image.

J'ai écrit une directive d'attribut, GetDimensionsDirective, ci-dessous pour ce faire:

import { Directive, Input, Output, ElementRef, Renderer, EventEmitter } from '@angular/core'; 

@Directive({ 
    selector: "[get-dimensions]" 
}) 

export class GetDimensionDirective { 
    @Output() calculatedDimensions = new EventEmitter<any>(); 

    constructor(private el: ElementRef) { 
     this.getDimensions(); 
    } 
    getDimensions() { 
     this.calculatedDimensions.emit({ "height": this.el.nativeElement.offsetHeight, "width": this.el.nativeElement.offsetWidth }); 
    } 
} 

et je consommeraient donc dans mon élément:

<img get-dimensions (calculatedDimensions)="dimsGot(event)" [src]="image.url" style="width:304px;height:228px;"> 

et dans mon conponent J'ai la fonction:

import { GetDimensionDirective } from './../../../../shared/directives/get-dimesions'; 
import { Component, OnInit, Input } from '@angular/core'; 

@Component({ 
    selector: 'my-image', 
    templateUrl: './image.component.html', 
    styleUrls: ['./image.component.css'] 
}) 
export class ImageComponent implements OnInit { 
    image={url: "http://localhost/myApi.WebService/api/resource/12", dimensions:null}; 


    constructor() { } 

    ngOnInit() { 
    } 

    dimsGot(dimensions) { 
    this.image.dimensions = {}; 
    } 
} 

Ma méthode "dimsGot" dans mon composant n'est pas entrée, peut-on e conseiller pourquoi?

Vive

Answer 1

sussed ... Je avais besoin de se lier à l'événement « charge » de l'élément (img) thenperform mes calculs et emi le résultat dans EventEmitter comme ça dans ma directive:

import { Directive, Input, Output, ElementRef, Renderer, EventEmitter } from '@angular/core'; 

@Directive({ 
    selector: "[get-dimensions]", 
    host: { 
     '(load)': 'getDimensions()' 
     }  
}) 

export class GetDimensionDirective { 
    @Output() calculatedDimensions = new EventEmitter<any>(); 

    constructor(private el: ElementRef) { 
    } 
    getDimensions() { 
     this.calculatedDimensions.emit({ "height": this.el.nativeElement.offsetHeight, "width": this.el.nativeElement.offsetWidth }); 
    } 
} 

puis quand je crochet dans la directive dans le fil de balisage dans ma méthode pour gérer l'événement comme celui-ci:

<img get-dimensions (calculatedDimensions)="dimsGot($event)" [src]="image.url"> 

maintenant dans mon code composant:

@Component({ 
    selector: 'my-image', 
    templateUrl: './image.component.html', 
    styleUrls: ['./image.component.css'] 
}) 
export class ImageComponent implements OnInit { 
    image = { url: "myApi.WebService/api/resource/12", dimensions: { height: 0, width: 0 } }; 
. 
. 
. 
. 
     dimsGot(dims) { 
     if (this.image && dims) { 
      this.image.dimensions.height = dims.height; 
      this.image.dimensions.width = dims.width; 
     } 
     }