Angular 4 DOM 操作和搜索答案

【问题标题】：Angular 4 DOM Manipulation and SearchAngular 4 DOM 操作和搜索
【发布时间】：2023-03-31 06:42:01
【问题描述】：

Angular 有 these 用于 DOM 操作，但我正在考虑使用 jQuery 来处理这些功能：closest()/children()。

所以，是否有一个与 jQuery 的函数最接近的函数相同的角度函数，它基本上只返回元素？

在 Angular 中这些功能是否有任何替代方案，而无需编写原生 JS/TS 操作来实现这些功能，就像 jQuery 一样，这很脏？还是可以继续使用 jQuery（我不处理模板操作）？谢谢。

更新

window.getComputerStyle 可以轻松复制 jquery 的 css()。
关于 jquery 的选择器：closest()

<div id="ample" #zero>
  <div id="xample" #first>
    <div #x>
    </div>
    <div #y>
    </div>
  </div>
</div>

我想知道 Angular 的替代操作是什么。我只能想到制作一个向上遍历的函数，jquery 已经执行了 - 提供或获取 DIV 并且元素 id 被动态添加/更改/删除。

例如，从#y 我想知道它最近的父母，ID 为 ample。我们知道目标元素有一个 #zero 选择器，但从 div #y 中检索它会进行 DOM 遍历（jquery 使用最接近（）简化了）或一些映射/数组操作来整理元素之间的关系，这在一点。

【问题讨论】：

大多数像这样的情况都是用指令、绑定和 ViewChild(ren) 装饰器解决的，所以你可能有 XY 问题。该问题不包含有关真实案例的任何信息，并且过于广泛。不，除非必要，否则不能继续使用 jQuery。 jQuery+Angular 上有很多帖子。
我不知道为什么有人应该导入像 jQuery 这样的孔库并且只使用它的几个方法。在您的情况下，jQuery 的 css() 和 closest() 方法很容易自己实现，因此无需导入孔库，除非该库是可摇树的。
哦，所以我真的需要实现这个。我希望 Angular 有这些内置功能。我只是不想编写已经存在的函数。谢谢

标签： javascript jquery angular

【解决方案1】：

有吗，应该避免在 Angular 中使用 jquery，下面是一个示例：

@Component({
    selector: 'sample',
    template: `
        <span #tref>I am span</span>
    `
})
export class SampleComponent implements AfterViewInit {
    @ViewChild("tref") tref: ElementRef;

    ngAfterViewInit(): void {
        // outputs `I am span`
        console.log(this.tref.nativeElement);
    }
}

您要搜索的关键字是 Elementref 和 Viewchild

【讨论】：

先生，关于角度工作流程。是否更倾向于基于参考？问：从 div 中，id 为 x 的最近父/祖先元素是什么？

【解决方案2】：

与 Angular 公开的 DOM 操作相比，JQuery 非常强大。有时它在 Angular 应用程序中非常有用且难以忽视。

你可以将它安装在你的项目中，但唯一的问题是 jQuery 可以在没有封装的情况下全局访问 DOM，所以如果你想使用好的实践，你应该只访问/修改你正在使用 jQuery 的组件的 DOM，如果如果您想访问/修改组件之外的 DOM，您应该将所需的数据作为 @Input 传递或使用事件以 @Output 的形式通知其他组件。

如果您已全局安装它，请不要忘记在组件中声明变量 $，因为 typescript 不知道 $ 是什么。

declare var $ :any;

【讨论】：

是的。如果我应该像其他人建议的那样同时使用它们，并且我在一些网站上读到不推荐使用它们，我很难做出决定。我不想再写 jquery 的最接近（）逻辑了。
我只是修改了我的答案，详细说明了为什么不推荐使用 jQuery。您必须评估商品和劣质，如果您使用它，至少您需要知道不该做什么。

【解决方案3】：

使用 Jquery 不是 Angular 的方式，但是在某些时候我们的手被束缚了，只有在那些情况下才使用 jQuery。使用@viewchild 或@viewchildren 获取DOM 元素。

span 我的名字是 XXX #name >

在 .ts 文件中 @ViewChildren('name') 组件：QueryList； console.log(this.components.toArray());

您将能够获取 DOM。如果您只想要 DOm 元素，请使用 @viewchild。在 @viewchildren 的情况下，它将返回一个包含所有使用相同选择器或模板引用变量的 DOM 元素的数组。

【讨论】：