问题标签 [viewchild]

I am using *ngFor to create a bunch of divs. I would like to get my hands on one of them an get its width.

Apparently, you cannot use ViewChild with *ngFor, because elReference remains undefined.

How do you get element reference created with *ngFor?

我试图引用我在使用应用程序期间添加的动态模板，但 view child 的值始终未定义，所以我问我可以在 View Init 之后实例化它吗？
谢谢 。我正在使用 Dragula 库，并且我想在放置拖动的元素时创建一个组件，问题是要创建的组件用于在同一页面中加载的许多组件中，所以我想注入一个“cabled” html 元素在其中的 on 中具有不同的局部变量，我想使用视图子项稍后访问该子项。

在 Angular 中，ViewChild 用于获取对放置在特定组件的 HTML 文件内的 dom 元素的引用。如何获取对位于组件 HTML 文件之外的 DOM 元素的引用？例如，它存在于祖父母兄弟组件中。

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

我很难理解这一点...我一直在阅读有关 ElementRef、ViewChild 等的内容...但我仍然不完全了解如何在 Angular 4 中横穿 DOM 元素。例如这个 jQuery 语句在 A4 中会是什么？

像：

如何以上述方式访问该元素 - 无需添加任何 id、类或 #template 标记？在某些情况下，我无法访问 html，所以我想知道如何在不使用 jQuery 的情况下执行此操作，因为 Angular 不赞成它：[

即使在使用@ViewChild 导入后，我也无法访问组件的属性。下面是代码。

header.monitor.component.ts

header.monitor.component.html

admin.component.ts

错误错误：未捕获（承诺）：类型错误：无法读取未定义的属性“标题”类型错误：无法读取未定义的属性“标题”

帮我解决这个错误。

我正在使用材料设计和 Angular 5。我试图使用材料加载器，所以当导航开始显示加载器时，当结束时根据这个问题的答案删除加载器。我试过viewchild了

并在我的组件构造函数中调用如下：

但控制台总是返回undefined。对 Angular 有点陌生。知道为什么吗？

如何转换

HTML

JS

这是我在 Angular 2 中不起作用的代码。

我有一个包含复选框组件列表的多选项列表组件。父组件具有用于鼠标悬停的 CSS:focus和:hover类。所有可控元素都在选项卡索引中（因此您可以笨拙地使用键盘在复选框中进行选项卡）。

现在我们要允许在多选项列表中使用箭头键导航。基本上我需要用来@ViewChild抓取我需要的元素并设置 .focus()它。这正是我在不同组件中所做的，并且有效。但是，在这里它不起作用。唯一的区别是，在它工作的组件中，我的*ngFor循环遍历一个divs 列表，在这种情况下，它遍历一个组件列表。

所以这归结为我无法让:focus伪类粘在我的组件上。下面的代码不完整，只是试图让第一个元素成为焦点。某种PoC。

MultiPicklist.component.html：

MultiPicklist.component.scss：

MultiPicklist.component.ts：

值得一提的是，:hover伪类可以工作，将鼠标悬停在组件上会为其提供正确的背景颜色。但不是.focus()。此外，不会抛出任何错误。

这是我试图访问子组件中的变量的组件。父级是应用程序组件，子级称为 LoginComponent

我从angular.io 站点中的这个示例中获取了这段代码 问题是，当执行 hideLogin() 函数时，我得到了这个错误：

我截断了错误消息，因为我认为整个堆栈跟踪没有任何用处。无论如何，我认为错误可能是 loginComponent 对象未初始化。但对我来说，消息说“未定义”听起来很奇怪，在我从中获取它的示例中，它没有做任何事情来初始化对象，并且它似乎已经分配了组件的单例实例，因为它是访问其属性。

这个问题与@viewChild return undefined问题不同，因为我没有尝试从构造函数访问对象。我正在尝试从通过单击事件执行的函数访问它。这是我的应用程序组件视图：

我什至尝试从 ngAfterViewInit() 方法访问它，如下所示：

但我得到了同样的错误

这是 Component ，它#h1在 html 中引用了一个 ViewChild：

为什么在？this.h1_undefinedconsole.log('h1:' + this.h1);

2020 年 11 月更新如果您使用的是具有静态选项的 最新 Angularv9，您就不会遇到这种情况@ViewChild。