web-dev-qa-db-ja.com

ディレクティブとコンポーネント内で要素の幅/高さを取得する方法は？

@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内で要素の幅/高さを取得したいのですが、ドキュメントを数回読みましたが、まだこの回答への道を見つけることができません。

angularangular-directiveangular-components
15
胡亚雄

以下に示すように、ElementRefを使用できます。

デモ： 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
  }
}

必要なときにコンポーネント自体で使用できるのと同じ方法。

35
micronyks

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;

}

セキュリティ

ElementRefを使用したセキュリティリスクについては、このように何もありません。 modify ElementRefを使用するDOMを使用すると、リスクが発生します。しかし、ここにいるのはgetting DOM Elementsだけなので、リスクはありません。 ElementRefを使用する危険な例は、this.myIdentifier.nativeElement.onclick = someFunctionDefinedBySomeUser;です。このようにAngularは、someFunctionDefinedBySomeUserがDOMに挿入されているため直接、スキップ Angular消毒。

13
bersling