有什么方法可以在 ViewChildren 中获取 ElementRef 和 Component ref 吗?

2024-06-28

我想从视图中获取本机元素及其相关组件的列表。

我会尝试做类似的事情,但它不起作用:

@ViewChildren('element', { read: [ElementRef, MyComponent] }) private elements: QueryList<any>; // <-- not work

or

@ViewChildren('element', { read: MyComponent }) private elements: QueryList<MyComponent>;
...
this.elements.first.nativeElement // <-- undefined

这可行,但看起来不正确:

@ViewChildren('element', { read: ElementRef }) private elements: QueryList<ElementRef>;
@ViewChildren('element', { read: MyComponent}) private components: QueryList<MyComponent>;

我的模板简短示例:

<virtual-scroller #scroll>
  <my-component #element *ngFor="let c of components"></my-component>
</virtual-scroller>

一种方法是注入:

@ViewChildren('element', { read: MyComponent}) private components: QueryList<MyComponent>;

在父组件中并公开elementRef来自孩子:

class MyComponent {
    constructor(public elementRef: ElementRef) {}
}

然后只需访问elementRef直接地:

this.components.forEach(component => component.elementRef);
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

有什么方法可以在 ViewChildren 中获取 ElementRef 和 Component ref 吗? 的相关文章

  • 如果用户禁用了 javascript,如何回退到完全不同的索引页面?

    我有一个大型 动态生成的单页网站 该网站严重依赖 javascript 我想为没有 javascript 的人提供后备 每个版本必须有不同的 php 代码 所以基本上我需要一个完全不同的索引页面 我不想将所有内容都包装在 javascrip
  • Java+DOM:注册和使用修改侦听器:教程?

    请向我指出一些教程或其他解释示例如何注册和使用修改监听器使用 Java 的 DOM 实现 在网络上我只找到 Javascript 或 Flex 示例 我的目标是了解何时Node被修改 我尝试了几种方法 没有任何效果 难道Java的DOM不支
  • 是的验证;同一字段可以接受不同类型吗?

    我对是的很陌生 我试图验证字段可以是遵循某个正则表达式的字符串 也可以是此类字符串的数组 这是检查字符串与我的正则表达式匹配的工作示例 field yup string matches regex 现在我想要field如果它有一个这样的字符
  • 请使用同一按钮播放和暂停音频

    我有这段代码并且只是播放 但我想使用相同的按钮 图像 播放和暂停 并且我不知道我需要添加什么 我需要做什么 请帮帮我
  • GraphQL:从对象构建查询参数

    如果我有一个对象 where publishedAt lt 2018 01 01 如何将其转换为适合查询参数的字符串 articles where publishedAt lt 2018 01 01 这看起来是一个有趣的库 我建议检查一下
  • 切换 Ag-Grid 中的浮动过滤器?

    我试图通过开关或按钮单击来确定浮动过滤器的显示 看起来很简单 我应该能够在 true 和 false 之间切换 将该值提供给网格选项中的浮动过滤器 然后刷新标题 对吗 不幸的是 网格似乎总是落后一步 当我第一次点击时 什么也没有发生 当我将
  • 停止倒数计时器 Javascript onClick

    给出以下代码 myButton02 click function myButton02 hide counter animate width toggle var count 65 var counter setInterval timer
  • 如何让机器人状态显示为“手机在线”

    我看到 NotSoBot 的状态为在线在移动 https i stack imgur com IiF4k png 有没有办法可以在discord js 中做到这一点 我知道这已经很旧了 但更简单的方法是将其添加到定义客户端 机器人的位置 c
  • 为什么这个 fs.readFile 循环没有将其结果推送到我的数组? [复制]

    这个问题在这里已经有答案了 usr bin env node var fs require fs async require async program require commander program version 0 0 1 usa
  • 在 Angular2 中使用 ngFor 进行多重嵌入

    我对 angular2 还很陌生 我正在尝试制作一个名为 的小角度组件 grid 它只是使用嵌入来重新排列其内容 它的模板 网格组件模板 grid component ts div class grid div class row div
  • JavaScript - babel-preset-env 不为 IE11 转换箭头函数

    我很难尝试配置 Babel 来转译 IE11 可以理解的代码 特别是箭头函数 跑步npx webpack mode development使用我的配置不会转换我的代码中的箭头函数 在eval 在生成的代码中的语句中 我可以看到所有实例都未转
  • 如何在反应路由器的登录页面中隐藏导航栏

    我想隐藏登录页面中的导航栏 我确实做到了 但我在其他页面上看不到导航栏 此代码是 My App jsx 文件的一部分 我在 App 的状态中创造了历史 当路径名是 或 login 时 我会隐藏导航栏 有用 但随后我输入了 ID 和密码 然后
  • Django 管理中的自定义依赖下拉菜单

    我有一个按阶段模型的项目外键 我很难在 Django 管理页面中创建依赖的下拉列表 我想当用户从该项目的 项目下拉 阶段选择一个项目时 在第二个下拉菜单中显示 实现这一目标的最佳方法是什么 如果下拉列表根据其父级的值来过滤项目 那就太好了
  • Chrome 扩展程序导致 DOM 闪烁,该扩展程序会在页面加载之前删除 DOM 元素

    我正在编写一个 chrome 扩展 我想在页面加载之前删除内容 例如this http tech blog tomchambers me 2016 01 13 How to write a simple page rewriting Chr
  • Backbone.View:delegateEvents 未将事件重新绑定到子视图

    我已将这个问题分解为尽可能小的示例 即 它只是为了演示问题 不一定代表现实世界的场景 假设我有一个父视图 此处为 MainView 其中包含一个子视图 此处为 SubView 如果在任何时候我需要重新渲染父视图 从而重新渲染子视图 我就会丢
  • ngClass 中的多个条件 - Angular 4

    如何对 ngClass 使用多个条件 例子 section 像这样的东西 我的 2 个菜单有相同的类 当其中一个菜单为真且 某事 为真时 我需要类 希望我解释得足够好 您正在尝试将数组分配给 ngClass 但数组元素的语法是错误的 因为您
  • Javascript 或 Coffeescript 中的“Bucket Fill”算法

    我正在编写一个小coffeescript js应用程序 允许用户设计图标 16x16像素或32X32像素 该图标实际上是一个带有颜色单元的二维数组 单元格可以有颜色或为空 我希望用户能够使用 桶油漆 工具填充空白单元格 代表着 如果用户单击
  • 如何获得DiVs等级?

    html div class div class p strong span style color FF0000 Content1 span strong p p style text align center Content2 img
  • 什么是标志变量?

    最近我遇到了标志变量 但我不知道它们的作用 我不太确定何时使用标志变量以及如何使用它 我用 Google 搜索了它 但没有任何与我的上下文 JavaScript 相关的具体示例 标记变量的定义和使用 http www javascriptk
  • React Native:当您的应用程序关闭时是否有回调函数?

    我有一个 setInterval 即使您关闭 而不是退出 应用程序也会继续运行 我想在我的应用程序关闭或设备进入睡眠状态时调用一个函数 以便清除 setInterval AppState 是你的朋友 看看AppState 的文档 https

随机推荐