基于元素类的 Angular2 QueryList

2024-01-11

有没有办法找回ViewChildren or ContentChildren按元素类别?

这可以通过 id 或组件工作,但不适用于基于类的查询,即classedViewItems and classedContentItems

@Component({
    selector: 'my-container',
    template '<div><ng-content><ng-content></div>'
})
export class MyContainer {
    @ViewChildren('item') viewItems: QueryList;
    @ContentChildren(MyItem) contentItems: QueryList;
    @ViewChildren('.fine-me') classedViewItems: QueryList; // <-- need this to work
    @ContentChildren('.find-me') classedContentItems: QueryList; // <-- or this
}

对于以下情况:

<my-container>
    <my-item class="find-me" #item *ngFor="let item; of items"></my-item>
</my-container>

我需要通过元素类获取查询列表而不对其进行修饰。


@ViewChild(), @ViewChildren(), @ContentChild(), @ContentChildren()仅支持模板变量的名称(或逗号分隔的名称列表)或组件或指令的类型作为选择器,正如角度文档中也提到的那样。

没有办法使用其他选择器。 你能做的就是过滤QueryList之后只获取具有特定类的元素,但这并不能让您免于向每个元素添加模板变量。

也可以看看如何选择组件模板中的元素? https://stackoverflow.com/questions/32693061/angular-2-typescript-get-hold-of-an-element-in-the-template/35209681#35209681

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

基于元素类的 Angular2 QueryList 的相关文章

  • 如何更改点击事件上的引导插入符指向方向

    我正在使用 2 3 2 引导程序 因为当我单击菜单按钮时 我可以更改插入符号图标的位置 我需要当我单击图标插入符号向上时 当您单击另一个项目时 插入符号返回到初始状态 这怎么可能 导航代码 div div class container d
  • 获取 pdf 第 1 页(共 2 页)的图像

    我正在使用 html2canvas 和 jsPDF 以及 Angular4 创建图像 我想将此图像放置在 2 页生成的 pdf 的第 1 页上 但似乎这条线 doc save test pdf 需要在函数内部htm2canvas 因为如果我
  • 内联执行生成的汇编程序

    我正在阅读以下演示文稿 http wingolog org pub qc 2012 js slides pdf http wingolog org pub qc 2012 js slides pdf其中讨论了 4 10 19 内联 ASM
  • 从对象获取数据 - 我看到数据但无法保存它们

    正如你所看到的 我是新来的 我确实尝试过搜索 但没有找到解决我问题的方法 所以这是我的问题 如果我这样做 console log grid data kendoGrid data 这在控制台中显示如下 所以我明白这一点 有一个数组和一个带有
  • 如何垂直打印数组中的字符串元素? [关闭]

    Closed 这个问题需要调试细节 help minimal reproducible example 目前不接受答案 我有一个数组 我想垂直打印每个元素 例如 myArr abc def ghi 输出应该是 a d g b e h c f
  • toJSON() 和 JSON.Stringify() 之间的区别

    如果您需要读取或克隆模型的所有数据属性 请使用其 toJSON 方法 此方法返回属性的副本作为 对象 尽管有其名称 但不是 JSON 字符串 当 JSON stringify 为 使用 toJSON 方法传递一个对象 它将返回的字符串化 t
  • Javascript“命名空间”和 jQuery AJAX

    我正在使用此处列出的建议 http www odetocode com articles 473 aspx http www odetocode com articles 473 aspx 使用模拟的JavaScript AJAX网络聊天系
  • jQuery 如何通过不同的列值计算表中的行数

    如何按表列计算不同的表行 Example table thead tr th NAME th th TECHNOLOGY th tr thead tbody tr td john td td jQuery td tr tr td mark
  • 根据数据更改图例颜色高图表

    我可以根据数据动态设置列的颜色 但无法弄清楚如何更改图例中的颜色 请注意 jsfiddle 最新的条形图是绿色的 但图例是蓝色的 有没有办法改变列颜色也会改变图例颜色 这是我用于列颜色的代码 jsfiddle http jsfiddle n
  • 谷歌浏览器如何启动桌面应用程序?

    我真的不知道术语 所以我将从一个例子开始 如果我点击磁力链接 Google Chrome 会询问我是否要启动 torrent 客户端 我单击 确定 chrome 启动该应用程序 该应用程序根据链接执行一些操作 现在有办法查看应用程序如何从
  • 如何在 Next.js 中正确使用 Mongoose 模型?

    我正在使用 TypeScript 和 MongoDB Mongoose 构建 Next js 应用程序 我在使用 Mongoose 模型时开始遇到错误 这导致它们在每次使用模型时都尝试覆盖模型 导致模型覆盖错误的代码 import mong
  • 单击时突出显示文本(javascript jquery html)

    当您在所有浏览器中双击某个单词时 它们会自动突出显示单击下的单词 但是否有可能找到一种方法exact单击一下就会发生同样的事情吗 我想这涉及到的事情可能是 TextRange 的东西 对所有段落 或整个正文或 div 的 onclick 做
  • 按钮导致页面重新加载

    我在我的页面上使用 html 和 jquery 在我的 html 中 我有一个按钮 单击该按钮将触发一个功能 当页面加载时 我调用文档准备中的主函数 这是我的代码 div div
  • 使用 htaccess 重写规则重定向后 CSS 未加载

    我有以下用户个人资料网址的简写 RewriteRule w profile php name of user 1 当我这样做时 该网站使用适当的 css 文件进行样式设置site com name of user 但当我这样做的时候却不是s
  • 加载 angularjs 路由后运行 javascript 代码

    我需要在 angularjs 加载路线后显示警报 显示警报的代码位于 angularjs 异步加载的视图中 视图加载后 我希望它能够运行 但它没有 我知道我可以广播并告诉它稍后运行等 但我需要一个更通用的解决方案 假设您正在谈论基于以下内容
  • onClick 事件适用于触摸屏设备上的触摸吗?

    我用过onclick我的网站上的活动 但是 当我在谷歌浏览器的开发人员模式移动视图中打开它时 触摸使用鼠标单击的元素没有任何反应 所以我的问题是 我还必须添加吗ontouch事件连同onclick事件或 onClick 事件适用于所有触摸屏
  • .parents() 没有 jquery - 或 querySelectorAll 为父母[重复]

    这个问题在这里已经有答案了 可能的重复 使用 matchesSelector js 检查 event target parentElement https stackoverflow com questions 12977658 check
  • 如何从 HTML 中的列数据而不是行数据创建表格?

    根据这篇文章W3学校 http www w3schools com html html tables asp 可以像这样在 HTML 中创建一个基本表格 table border 1 tr td row 1 cell 1 td td row
  • python 函数返回 javascript date.getTime()

    我正在尝试创建一个简单的 python 函数 它将返回与 javascript 相同的值new Date getTime 方法 如所写here http www w3schools com js js dates asp javascrip
  • Bootstrap - 为反向行模式创建移动自适应

    我想用 Bootstrap 创建一个反向效果 第一行 左边是文字 右边是图像 第二行 左边是图片 右边是文字 第三行 左边是文字 右边是图片 第四行 左边是图片 右边是文字 而且这种情况一直持续下去 它在大型设备上看起来非常漂亮 但当它在设

随机推荐

  • 如何在不打开网络浏览器的情况下在spotipy中进行身份验证?

    我尝试了标准方法 主页上有描述 但我需要在没有网络浏览器的情况下登录 我怎样才能做到这一点 您可以使用 Spotify 的 python 库之一 例如 https github com plamere spotipy https githu
  • setMicrophoneMute() 如何工作?

    我一直在尝试使用Android的AudioManager setMicrophoneMute 没有取得多大成功 也就是说 无论我做什么 它都拒绝将麦克风静音 我在网上搜索了一些线索 发现了一些报告类似经历的参考资料 AudioManger
  • 使用 CA 签署的另一个证书签署证书

    是否可以使用由 CA 签名的证书作为其他证书的 CA 来签署新证书 并且仍然由根 CA 验证它们 例子 create new key openssl genrsa des3 out server key 2048 openssl req n
  • 如何将文件复制到android的文件系统?

    如何将文件复制到android中的文件系统 位置 我怎样才能访问它 将文件从android复制到本地 adb pull data data com example sample sample 从本地复制文件到android adb push
  • 对常量值使用 def 与 val 有何含义

    使用有什么影响def vs val在 Scala 中定义一个常量 不可变的值 我显然可以写出以下内容 val x 3 def y 4 var a x y 7 这两种说法有什么区别 哪一种表现更好 是推荐的方式 更惯用 我什么时候会使用其中一
  • 如何给Tomcat添加健康检查?

    我想在 Linux 的 Tomcat 上配置一个简单的健康检查 例如 http localhost 8080 health http localhost 8080 health 我一直在检查Tomcat文档 我发现了这个内置的服务器状态站点
  • 如何安装最新版本的 TensorFlow 2?

    我想知道为什么我无法安装TensorFlow 2 0 0 到目前为止稳定版本在他们的官方网站上 https www tensorflow org versions even in PyPi https pypi org project te
  • python 中的弱引用列表

    我需要一个弱引用列表 当它们消失时会删除它们 目前 我执行此操作的唯一方法是不断刷新列表 手动删除死引用 我知道有一个 WeakKeyDictionary 和一个 WeakValueDictionary 但我真的想要一个 WeakList
  • 构造失败通知:非法构造函数

    我的网站使用从未在移动设备上运行过的桌面通知 但我最近开始在 Android 4 4 上的 Chrome 版本 42 0 2311 108 中收到以下异常 Failed to construct Notification Illegal c
  • 如何在页面 API 中获取图像 url 或下载图像的 url,其中图像是由流场创建的?

    在我的 wagtail 应用程序中 我有一个流字段 用于使用 ImageChooserBlock 上传图像以及标题和文本 这意味着在单个流字段中我有一个标题 一个文本和一个图像上传输入 我正在尝试在其余框架的页面 API 中获取图像 url
  • 将 MomentJS 与 TypeScript 结合使用 - moment() 有什么类型?

    我目前正在将我的项目从 ES5 转换为 ES6 但我遇到了 MomentJS 的问题 version 2 18 1 问题是我有一些变量是 Moment 对象 但我无法对它们调用 moment 一个例子 import as moment fr
  • 使用 javascript 捕获桌面屏幕截图

    是否可以使用javascript捕获客户端Windows桌面的屏幕截图 那么在linux和mac操作系统中呢 澄清 这个问题有not被问到或回答 因为我希望捕获整个桌面 而不仅仅是浏览器 我还想捕获 本机 屏幕截图 而不是从某些底层表示重新
  • 为什么我想在一个函数中锁定两个互斥体 - 这也带有延迟锁?

    https en cppreference com w cpp thread lock tag https en cppreference com w cpp thread lock tag void transfer bank accou
  • Grails UrlMapping 重定向以保持 DRY

    我正在与Grails 2 1 1并希望添加一些映射到控制器操作的自定义 URL 我可以做到这一点 但原始映射仍然有效 例如 我创建了一个映射add property to directory in my UrlMappings如下 clas
  • Python 类继承属性错误 - 为什么?怎么修?

    SO 上的类似问题包括 this one https stackoverflow com questions 10268603 python class inheritance attributeerror subclass object
  • 使用 Let 进行子查询的 Linq

    我试图从这个 Linq 查询中获取的是所有广告的列表 其中最近关联的日志与LogType IsStatus true has a LogType Name已确认或已更新 需要明确的是 一个 Advert 有很多 Log 每个 Log 有一个
  • 在 Android 中创建一个没有 Intent 的重复事件并提醒直到特定日期?

    我有一个 Android 应用程序 可以通过服务下载一些药物信息 例如 fludex white round 2 24 02 2012 表示一种名为fludex 白色圆形的药物 从今天到2012年1月24日必须每天服用2次 现在我想在下载药
  • 在 pygame 中堆叠不同类型的透明度

    我有一个自定义 GUI 模块 它使用树中的对象来管理界面 并以正确的顺序将它们逐一传输 现在 在我的对象中 我有一些只是具有每像素透明度的表面 而其他对象则使用颜色键 我的问题是 当将具有每像素透明度的表面传输到另一个填充有色键的表面时 第
  • 在 JS 中具有正确的“this”值

    我有两个类似的 Javascript 对象 var Object2 new function this FetchData function callback do some stuff callback data var Object1
  • 基于元素类的 Angular2 QueryList

    有没有办法找回ViewChildren or ContentChildren按元素类别 这可以通过 id 或组件工作 但不适用于基于类的查询 即classedViewItems and classedContentItems Compone