Ionic 4 Stencil PWA - Управление элементами DOM

Question

Я пробую ionic 4 впервые и пытаюсь изменить стиль CSS элемента на моей странице.

например.

У меня есть div

<div id="foo"></div>

Теперь на mouseover Я хотел бы переместить div в другую позицию на моей странице.

Как получить элемент #foo и изменить позицию при наведении курсора в моем компоненте?

пожалуйста, обратите внимание, что это всего лишь пример того, что я хочу сделать, и я не заинтересован в использовании CSS для этого, поскольку он не будет работать для меня.

Я немного читал об ионике4 и тень дом, но это все еще не имеет смысла для меня.

Answer 1

Поскольку вы не хотите писать какие-либо CSS и хотите ссылаться на элемент в вашем контроллере, можете использовать viewChild, как показано ниже

В HTML

<div #foo></div>

В контроллере

import { Component, ViewChild, ElementRef } from '@angular/core';
.
.
.

@ViewChild('foo') divRef: ElementRef;

constructor() {
}

ngAfterViewInit() {
  this.divRef.nativeElement.style.background = "red";
}

Здесь работает код в stackblitz