Ionic 4 Stencil PWA - 操作 DOM 元素答案

【问题标题】：Ionic 4 Stencil PWA - Manipulating DOM elementsIonic 4 Stencil PWA - 操作 DOM 元素
【发布时间】：2019-02-13 03:34:37
【问题描述】：

我是第一次尝试 ionic 4，我正在尝试更改页面上元素的 css 样式。

例如。

我有一个 div

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

现在在mouseover 我想将 div 移动到我页面上的不同位置。

如何获取元素 #foo 并在我的组件中更改鼠标悬停时的位置？

请注意，这只是我想做的一个例子，我没有兴趣为此使用 CSS，因为它不适合我。

我已经阅读了 ionic 4 和 shadow dom，但对我来说仍然没有意义。

【问题讨论】：

也许像 this 这样的东西是你要找的？
是的，非常感谢，这实际上让我明白我实际上没有使用角度，而只是使用模板。

标签： ionic4 stenciljs

【解决方案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中的运行代码

【讨论】：

所以我检查了我的 node_modules 文件夹并且 @angular/core 似乎不存在于 ionic 4。
请注意，这是一个 PWA，我使用npx create-stencil ionic-pwa 命令安装了项目。
@user3718908 这意味着你没有使用角度