问题标签 [elementref]

目前我正在学习 Angular 8，我发现在几篇文章中人们使用下面的代码来获取 html DOM 元素。

但与上面的代码相比，我们可以使用document.getElementById("myDiv")如下方式获取 html DOM 元素。

那么哪种方式更可取？为什么？
我试图在谷歌上找到答案，但找不到任何合适的技术和详细答案。

谢谢，

我在 ngAfterViewInit 中调用 this.container.nativeElement.getBBox() — 正如您在屏幕截图中看到的那样，这会导致错误，并且 getBBox() 应该不是函数。奇怪的是 getBoundingClientRect() 在元素上工作得很好。这可能是什么问题？

开发控制台中的错误消息的屏幕截图

当我使用 Jest 运行单元测试时出现错误，我在 Angular 中有应用程序的组件，当我在构造函数“ElementRef”中有时，它会引发以下错误：

只要构造函数中没有 ElementRef 参数，测试就可以正常运行。但是当我戴上它时，测试失败并出现上面列出的错误：Cannot resolve all parameters for IncrementadorComponent: (?).

我澄清说，对于 Jasmine 和 Karma，这不会发生。Jest 只是发生在我身上。

我有一个滚动动画组件，我可以将其添加到其他一些组件中以显示滚动动画。当父组件有滚动条时会显示滚动动画。

我如何模拟 this.elementRef.nativeElement.parentElement 及其 offsetHeight 和 scrollHeight 值，所以方法 componentHasScrollbar() 将在我的单元测试中返回 true？

结果

在另一个组件中，它无需任何初始化即可正常工作。

但我不知道为什么这个组件不能工作

我正在尝试像这样使用 ViewChild：

这是模板：

但是， ViewChild 注释显示此错误：

制作目标 ES5 不是我的解决方案，因为我不希望这样。

有什么方法可以使用 ViewChild？我指的是本教程：https ://www.tektutorialshub.com/angular/renderer2-angular/

我有一个包含 3 个组件的页面：

1. 简介，带有点击按钮的普通屏幕（加载第 2 部分）
2. 演示，包含n 个步骤（单击第 1 部分按钮后全屏加载的 div，并根据步骤编号加载元素）
3. 结论（最后一部分，在最后一步之后加载，不再全屏）

下面，有一个简化的代码示例来解释这个想法：

html

打字稿

单击按钮时效果很好。部件已更新，变量part和demoEnded控制页面部件。
我面临的问题是如果用户在全屏模式下按下 ESC 按钮。
首先，我创建了一个附加到 fullscreenchange 事件的函数，如下所示：

当页面从全屏返回时，此函数被正确调用，但此时，当单击 ESC 时，demoEnded属性未定义，因此我的 div 没有正确隐藏，也没有加载下一个容器。
在上下文中存储变量时，这似乎是与 HTML 与 Angular 相关的错误。
编辑：即使在我捕获的事件期间未明确定义该属性，但似乎返回了上下文，因为演示停留在我单击 ESC 时所在的页面上，而不是从头开始。此外，如果我继续单击“下一步”按钮，则演示在全屏时以相同的方式完成。
有人知道我在这种方法中是否做错了什么？
笔记：

• 我使用 div 并隐藏它的原因是我需要 div 元素在进入全屏时存在。使用带有 *ngIf 的容器，当我单击第一个按钮时，该元素将不存在，所以我没有让它全屏显示。
• 我只在Chrome上进行测试，因为这将是唯一使用的浏览器。

我的解决方法

在我发现我的变量未定义后，我想出了这个姑息解决方案：

Html（用一种方法替换了我的变量）

打字稿（将我的变量保存到 localStorage 并在需要时检索）

该解决方案有效，因此它可以帮助其他人解决同样的问题。
但我仍然对此感到困惑。
我应该为 Angular 提交错误吗？或者也许是铬？
这个解决方案可以吗，还是有另一种（更好的）方法来解决这个问题？

提前致谢

我想动态创建一个元素，然后获取它的 clientWidth。使用常规 DOM API 的代码片段如下所示。

HTML 片段：

该元素的 css 属性可见性设置为“隐藏”。
打字稿/ Javascript 片段

如何使用 Angular 的 Element Ref 和 Renderer2 API 实现目标？

我想验证登录表单。首先，我有一个角登录组件，它有一个子组件，一个使用 stenciljs 创建的表单。此表单有自己的方法，称为 isValid()。

我已经为表单分配了一个模板，并且我使用了 @ViewChild 装饰器来引用它：

login.component.html：

login.component.ts：

所以在我的登录组件 login.component.ts我可以毫无问题地使用：

当我尝试测试此登录组件并尝试使用夹具login.component.spec.ts调用 isValid 函数时出现问题

我得到了错误：

fixture.componentInstance.form.nativeElement.isValid 不是 UserContext 中的函数。

这就是我在登录测试组件login.component.spec.ts中启动测试的方式：

我可能做错了什么？提前致谢。

我需要在动态创建输入字段的页面上修改 DOM。

我使用 @viewChildren 将这些 elementRefs 拉入一个数组。我一直在阅读使用 elementRefs 是一个坏主意。我不使用它们来修改 DOM，但我确实使用它们来允许 renderer2 修改 DOM。

IE

score 是分配给@viewChildren 的变量。

这段代码有问题吗？

我想知道其他一些示例是否会导致可移植性或服务器端渲染问题.....

1)

（再次分数是我分配给@viewChildren的变量）

3)

currentField 只是一个 ElementRef。

4）。使用 Renderer2，所有这些方法都可以接受设置值的方法吗？