webentwicklung-frage-antwort-db.com.de

Wie erhält man die Breite / Höhe des Elements in Direktiven und Komponenten?

@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, ich möchte die Breite/Höhe des Elements in MoveDirective und DonationComponent ermitteln. Ich habe das Dokument mehrmals gelesen, kann aber immer noch keinen Weg zu dieser Antwort finden. Weiß jemand das, bitte helfen Sie mir, vielen Dank!

angularangular-directiveangular-components
15
胡亚雄

Sie können ElementRef wie unten gezeigt verwenden,

DEMO: https://plnkr.co/edit/XZwXEh9PZEEVJpe0BlYq?p=preview Überprüfen Sie die Browserkonsole.

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

Genauso können Sie es in der Komponente selbst verwenden, wo immer Sie es benötigen.

35
micronyks

Für ein bisschen mehr Flexibilität als mit micronyks answer können Sie es so machen:

1. Fügen Sie in Ihrer Vorlage #myIdentifier Zu dem Element hinzu, von dem Sie die Breite erhalten möchten. Beispiel:

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

2. In Ihrem Controller können Sie dies mit @ViewChild('myIdentifier') verwenden, um die Breite zu erhalten:

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;

}

Sicherheit

Über das Sicherheitsrisiko bei ElementRef gibt es so nichts. Es besteht das Risiko, dass Sie ändern das DOM mit einem ElementRef verwenden. Aber hier erhalten Sie nur DOM-Elemente, sodass kein Risiko besteht. Ein riskantes Beispiel für die Verwendung von ElementRef wäre: this.myIdentifier.nativeElement.onclick = someFunctionDefinedBySomeUser;. Auf diese Weise hat Angular keine Chance, seine Desinfektionsmechanismen zu nutzen, da someFunctionDefinedBySomeUser direkt eingefügt wird in das DOM, Überspringen der Angular Desinfektion.

13
bersling