如何在Angular中获取DOM元素的样式？

Question

我知道你可以使用ngStyle来设置元素的样式.但是如何获取元素的样式(即浏览器呈现的默认样式)？

此代码不起作用,但表达我正在尝试做的事情:

<p>TEXT</p>
width of TEXT element is {{textElement.width}}
height of TEXT element is {{textElement.height}}

我希望p元素正常呈现(但是浏览器想要,而不是告诉它宽度或高度).但是,我想知道渲染的宽度和高度是多少.如何绑定东西来捕获它？

编辑:有些人问我想要做什么宽度和高度.我想做的是这样的:

<p *ngIf="!isEditing">{{myText}}</p>
<textarea *ngIf="isEditing" [(ngModel)]="myText"></textarea>

默认情况下,显示p而不显示textarea.如果用户进入编辑模式,则p将被textarea替换.我想设置textarea的宽度和高度以匹配p,因此过渡看起来无缝.有一个更好的方法吗？

Answer 1

这也可以使用来完成@ViewChild

stackblitz 链接：https://stackblitz.com/edit/angular-playground-jzgein

组件.ts：

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

@Component({
  selector: 'my-app',
  styleUrls: ['./app.component.scss'],
  templateUrl: './app.component.html',
})
export class AppComponent implements OnInit {
   @ViewChild('viewChildHook', {static: true}) viewChildHook: ElementRef;

ngOnInit(){
      const value = getComputedStyle(this.viewChildHook.nativeElement).getPropertyValue('--my-variable-name');
      console.log("value", value);

}

}

组件.html：

<div #viewChildHook class="html-dom-element">
    aaaaaaaaaaaaaaaaaaaaaa
    bbbbbbbbbbbbbbbbbbbbbb
    cccccccccccccccccccccc
</div>

组件.scss：

.html-dom-element{
  --my-variable-name: 300px;
    width: var(--my-variable-name);
}

Answer 2

最好的方法是使用一个指令,通过该指令可以访问应用此指令的本机DOM元素.然后,您可以等到DOM呈现为AfterViewInit钩子并使用getComputedStyle方法获取所有计算样式.

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

@Directive({
  selector: '[style-getter]'
})

export class StyleGetter {
  constructor(public el: ElementRef) {}

  ngOnChanges() {
    setTimeout(() => {
      console.log(this.el.nativeElement.offsetWidth);
    })
  }

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

你也应该挂钩到ngOnChanges钩子,因为在输入绑定改变时经常会重新呈现DOM.您可以使用setTimeout等待直到计算所有样式并呈现DOM.

您还必须使用offsetWidth而不是width,因为:

offsetWidth返回计算元素的宽度,而el.style.width只返回由element验证的element.style中的width属性,并不反映实际元素的维度.

在这里阅读更多.