如何 Transverse/Manipulate Angular 中的 DOM 4

Question

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

我很难理解这个……我一直在阅读有关 ElementRef、ViewChild 等的内容……但我仍然不完全理解如何横向 DOM Angular 中的元素 4. 例如，这个 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 语法，如果你喜欢的话。

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

-编辑-

如果你不能像我之前提到的那样进入 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(...)

How To Transverse/Manipulate the DOM in Angular 4