Angular 中的高级 DOM 操作答案

【问题标题】：Advanced DOM manipulation in AngularAngular 中的高级 DOM 操作
【发布时间】：2020-09-14 17:11:18
【问题描述】：

大家早上好，

我目前正在学习 Angular。我想知道我们怎样才能像以前在 JQuery 中那样实现 DOM 操作，但使用 Angular 方式。

例如，如果我想选择一个类型或特定类的所有元素，循环遍历匹配元素的数组或列表并应用一些处理（在页面或视图已像 JQuery 中的文档就绪函数一样呈现之后） .

在 JQuery 中它看起来像：

$('elementsTofind').each(function(index, value){
  // Apply code to each element
});

谢谢

【问题讨论】：

不知道为什么你需要用 Angular 来做这件事。为什么渲染时没有完成？
好吧，你需要开始忘记关于 jquery 的任何事情。
我没有使用 JQuery，但我想知道如何使用 Angular 机制实现相同的结果。
您不会像在 jQuery 中那样进行 DOM 操作。您的（看似理论上的）问题基于 jQuery 行为。如上所述，完全忘记 jQuery，想出一个你需要解决的实际问题，然后问一个相应的问题，看看它是如何在 Angular 中完成的。

标签： jquery angular dom

【解决方案1】：

试试

import {AfterViewInit, Component, QueryList, ViewChildren} from '@angular/core';
@Component({selector: 'my-cmp', template: `...`})
class MyComponent implements AfterViewInit {
  @ViewChildren('elementsTofind') elementsTofind!: QueryList<Element>;
  ngAfterViewInit() {
    // viewChildren is set
    // ...
    myMethod();
    // ...
  }
  myMethod(): void {
    elementsTofind.forEach((value, index) => {
      // Apply code to each element
    });
  }
}

【讨论】：

感谢 Kaustubh 提供的解决方案。我还没有尝试过，但我可以将相同的逻辑放在指令而不是组件 .ts 文件中，然后将指令放在组件上吗？会不会也这样。我之所以问，是因为有人告诉我永远不要在 e 指令之外操作或与 DOM 交互。谢谢
@PierreRubensMilorme 我不知道答案。我还建议您尽可能详细地提出您未来的问题（而不是“我如何？”，说“我如何使用指令？”）。