Как получить ширину/высоту элемента внутри директив и компонента?

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{}

Эй, я хочу, чтобы ширина/высота элемента в MoveDirective и DonationComponent, я прочитал документ несколько раз, но до сих пор не может найти путь к этому answer.Do кто-то знаю, что это, пожалуйста, помогите мне ,большое спасибо!

Answer 1

Вы можете использовать ElementRef, как показано ниже,

DEMO: консоль https://plnkr.co/edit/XZwXEh9PZEEVJpe0BlYq?p=preview контроля встречается браузера.

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 
    } 
} 

Точно так же вы можете использовать его внутри самого компонента, где бы вы ни нуждались.

Answer 2

Для немного больше гибкости, чем с micronyks ответ, вы можете сделать это так:

1. В шаблоне, добавьте #myIdentifier к элементу вы хотите, чтобы получить ширину от. Пример:

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

2. В контроллере, вы можете использовать это с @ViewChild('myIdentifier'), чтобы получить ширину:

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; 

} 

---

Security

О риске безопасности с ElementRef, вроде этого, нет. Был бы риск, если бы вы изменили DOM с помощью ElementRef. Но здесь вы только получаете DOM Elements, поэтому нет риска. Рискованным примером использования ElementRef будет: this.myIdentifier.nativeElement.onclick = someFunctionDefinedBySomeUser;. Подобно этому Угловая не получает возможности использовать свои механизмы санитарии, так как someFunctionDefinedBySomeUser вставлен непосредственно в DOM, skipping Угловая санитария.