Elemanların genişliği/yüksekliği direktifler ve bileşenler dahilinde nasıl edinilir?

Question

@Component({ 
 
    selector: '.donation', 
 
    template: ` 
 
    <figure id="donation" move> 
 
     <img src="image/qrcode.png"/> 
 
     <figcaption> 
 
     Buy me a cup of coffee. 
 
     </figcaption> 
 
    </figure> 
 
    ` 
 
}) 
 
export class DonationComponent{} 
 

 
@Directive({ 
 
    selector: '[move]' 
 
}) 
 
export class MoveDirective{}

Hey, bu bana yardım edin biliyorum bu answer.Do biri için bir yol bulamıyorum hala MoveDirective ve DonationComponent içinde öğenin genişlik/yükseklik, ben belge birkaç kez okumak almak istiyorum ama ,çok teşekkürler! aşağıda gösterildiği gibi

Answer 1

Sen ElementRef kullanabilirsiniz

DEMO: https://plnkr.co/edit/XZwXEh9PZEEVJpe0BlYq?p=preview onay tarayıcının konsol. İhtiyacınız her yerde bileşen kendi içinde kullanabilirsiniz

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

@Directive({ 
    selector:"[move]", 
    host:{ 
    '(click)':"show()" 
    } 
}) 

export class GetEleDirective{ 

    constructor(private el:ElementRef){ 

    } 
    show(){ 
    console.log(this.el.nativeElement); 

    console.log('height---' + this.el.nativeElement.offsetHeight); //<<<===here 
    console.log('width---' + this.el.nativeElement.offsetWidth); //<<<===here 
    } 
} 

aynı şekilde. micronyks ile daha

biraz için

Answer 2

fazla esneklik böyle yapabilirsin, cevap:

Şablonunuzda

1., içinden genişliğini elde etmek istediğiniz öğeye #myIdentifier ekleyin. Örnek: güvenlik riskine ilişkin olarak

import {AfterViewInit, Component, ElementRef, OnInit, ViewChild} from '@angular/core'; 

@Component({ 
    selector: 'app-my-component', 
    templateUrl: './my-component.component.html', 
    styleUrls: ['./my-component.component.scss'] 
}) 
export class MyComponentComponent implements AfterViewInit { 

    constructor() { } 

    ngAfterViewInit() { 
    console.log(this.myIdentifier.nativeElement.offsetWidth); 
    } 

    @ViewChild('myIdentifier') 
    myIdentifier: ElementRef; 

} 

---

Güvenlik

: Kumandanızda olarak

<p #myIdentifier> 
    my-component works! 
</p> 

2., genişliğini almak için @ViewChild('myIdentifier') ile kullanabilirsiniz ElementRef, bunun gibi, hiçbiri yoktur. Bir ElementRef kullanarak DOM değerini değiştirirseniz bir risk olur. Ama burada sadece alınıyorsunuz DOM Öğeleri böylece risk yok. ElementRef kullanmanın riskli bir örneği: this.myIdentifier.nativeElement.onclick = someFunctionDefinedBySomeUser;. Bu Eğik almaz gibi someFunctionDefinedBySomeUser beri sanitisation mekanizmalarını kullanmak için bir şans Eğik sanitisation atlayarak, DOM doğrudaneklenir.