Question

＆＃13;

skills

＆＃13;

嘿，我想在MoveDirective和DonationComponent中获取元素的宽度/高度，我多次阅读文档但仍无法找到解决方法。有人知道这个请帮助我，非常感谢！

Answer 1

您可以使用 ElementRef ，如下所示，

DEMO：https://plnkr.co/edit/XZwXEh9PZEEVJpe0BlYq?p=preview 检查浏览器的控制台。

def char_search(input_str):
    for char in input_str:
        if char in list1:
            print("lower")
        if char in list2:
            print("Upper")

同样，您可以在任何需要的地方使用它。

Answer 2

比使用micryks答案更灵活一点，你可以这样做：

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的安全风险，就像这样，没有。如果您使用ElementRef 修改 DOM，则存在风险。但是在这里你只是获得 DOM元素，所以没有风险。使用ElementRef的一个有风险的例子是：this.myIdentifier.nativeElement.onclick = someFunctionDefinedBySomeUser;。像这样Angular没有机会使用它的消毒机制，因为someFunctionDefinedBySomeUser直接插入到中，跳过角度消毒。

如何在指令和组件中获取元素的宽度/高度？

2 个答案: