Question

我需要使用elementRef实现角度的基本折叠，但是我发现很难理解，并且HTML包含的ngfor我需要将索引值发送给click事件，以便它获取

这里是链接 https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_collapsible_animate

var coll = document.getElementsByClassName("collapsible");
// i have replaced this 
var in_Angular = Array.from(document.querySelectorAll('.collapsible'));


var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");

    console.log(this.classList);
    var content = this.nextElementSibling;  //where this value coming from
    if (content.style.maxHeight){
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight + "px";
    } 
  });
}

我认为不需要addEventListener，因为在角度上我们有click事件。在示例中如何使用elementRef。

Answer 1

我更喜欢使用功能强大的库，例如：

https://www.primefaces.org/primeng/#/accordion

https://valor-software.com/ngx-bootstrap/#/accordion

https://ng-bootstrap.github.io/#/components/accordion/examples

但是如果您需要更多控制：在角度（特别是> 2）中，您必须考虑不同。这不是遵循类似javascript的方法来解决问题的好方法。在开始项目之前，我们必须阅读有关这些框架的更多信息。实际上，您应该忘记getElementsByClassName，querySelectorAll，content.style.maxHeight和所有这些东西。在Angular中，几乎有了一个全新的概念。

Answer 2

我强烈建议您构建一个自定义指令，并利用angular天然提供的@HostListener

使用ElementRef实现角度崩溃

2 个答案: