如何在Angular 4中横向/操纵DOM

Question

我正在寻找如何访问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格格不入：[

Answer 1

这个<ion-grid [class.add-this-class]="whenThisState === true"></ion-grid>怎么样？ 或ngClass语法（如果您愿意）。

还是要从父组件或其他组件中获取该元素？

-编辑-

如果您不能转到角度模板并像我前面提到的那样在那里进行绑定，那么基本上您有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(...)