如何在 Angular 4 中横向/操作 DOM答案

【问题标题】：How To Transverse/Manipulate the DOM in Angular 4如何在 Angular 4 中横向/操作 DOM
【发布时间】：2017-11-17 00:31:38
【问题描述】：

我正在寻找如何访问 A4 中的 DOM 元素。

我很难理解这一点...我一直在阅读有关 ElementRef、ViewChild 等的内容...但我仍然不完全了解如何在 Angular 4 中横穿 DOM 元素. 例如，这个 jQuery 语句在 A4 中会是什么？

$('events > ion-content > div.scroll-content > ion-grid:nth-child(1)').css({blah blah});

喜欢：

ElementRef.nativeElement - events > ion-content > div.scroll-content > ion-grid:nth-child(1)

如何以上述方式访问该元素 - 无需添加任何 id、类或 #template 标记？在某些情况下，我无法访问 html，所以我想知道如何在不使用 jQuery 的情况下执行此操作，因为 Angular 不赞成它：[

【问题讨论】：

为什么需要这样做？这可能就是你想问的问题。我承认这通常是一个令人讨厌的问题，但在 jQuery 和 Angular 类框架之间进行转换时，我们通常不需要明确地进行复杂的 DOM 元素选择/操作。不要过于描述，只需说“我正在尝试拖放等”
@NicholasKyriakides 好吧，在我遇到这种需求的一个案例中，我试图在离子生成的无线电警报中添加一个搜索栏。我目前可以使用 jQuery 来追加搜索栏，但正如在各处指出的那样，jQ 不适合 A4。其他时间跟踪元素高度、滚动位置等。
我只是在寻找如何访问该元素 - 在那里我很可能会弄清楚其余部分。

【解决方案1】：

这个怎么样 <ion-grid [class.add-this-class]="whenThisState === true"></ion-grid> ? 或者 ngClass 语法，如果你喜欢的话。

或者您想从父组件或其他组件中获取该元素？

-编辑-

如果你不能像我之前提到的那样去 angular 模板并在那里做一些绑定，那么基本上你有 2 个选项 Vanilla JS： private theElementYouAreLookingFor: HTMLElement

在ngAfterViewInit()生命周期中尝试用JS获取它并存储它this.theElementYouAreLookingFor或

使用新的 Angular 方式 @ViewChild('someVar') el:ElementRef; constructor(private renderer: Renderer2) {} 在ngAfterViewInit()this.el.nativeElement();

或使用Observables 类似这样的东西： `const clickEl = document.querySelector('#my-button');

const click$ = Rx.Observable.fromEvent(clickEl, 'click');`

然后订阅

click$.subscribe(...)

【讨论】：