当前位置: 开发笔记 > 前端 > 正文

获取DOM元素,它是Angular中的一个组件

作者：炫彩十字绣I_775 | 来源：互联网 | 2023-01-22 14:43

如何解决《获取DOM元素,它是Angular中的一个组件》经验，为你挑选了1个好方法。

我已经在这里读了一些答案,比如这个,但我的问题略有不同.我想将组件作为DOM元素,以便我可以在其上添加/删除一些CSS类.

我的HTML模板包含组件:

我的类包含对它的引用:

@ViewChild('sidenav') sidenav: ElementRef;

但是当我登录我this.sidenav的一个函数时,我发现它是一个Sidenav组件类的表示,而不是它的DOM表示.为什么会这样？

1> Günter Zöchb..：

您可以使用read参数指定所需内容:

@ViewChild('sidenav', {read: ElementRef}) sidenav: ElementRef;



通过这种方式,您ElementRef可以使用this.sidenav.nativeElement@joshrathke提到的内容

或(对于其他用例)

@ViewChild('sidenav', {read: ViewContainerRef}) sidenav: ElementRef;


我对你喜欢的问题的回答也提到了这个read参数/sf/ask/17360801/




    
        
                        dom
                        css
                        html
                        ide
                        view
                        native
                    
    



    
        写下你的评论吧 !
        
            
                吐个槽吧,看都看了
            
            
                
                                        会员登录 | 用户注册
                                    
                
            
        

        
    

    
        推荐阅读
        
            
                                
                    
                        css
                        Html5-Canvas实现简易的抽奖转盘效果
                    

                    
                                                
                            
                        
                                                
                        本文介绍了如何使用Html5和Canvas标签来实现简易的抽奖转盘效果，同时使用了jQueryRotate.js旋转插件。文章中给出了主要的html和css代码，并展示了实现的基本效果。 ...
                        [详细]
                    
                    

                    
                        蜡笔小新   2023-12-13 06:02:20
                    

                

                
                                
                    
                        css
                        如何自行分析定位SAP BSP错误
                    

                    
                                                
                            
                        
                                                
                        The“BSPtag”Imentionedintheblogtitlemeansforexamplethetagchtmlb:configCelleratorbelowwhichi ...
                        [详细]
                    
                    

                    
                        蜡笔小新   2023-12-14 19:58:05
                    

                

                                
                    
                    
                
                
                                
                    
                        css
                        基于layUI的图片上传前预览功能的2种实现方式
                    

                    
                                                
                            
                        
                                                
                        本文介绍了基于layUI的图片上传前预览功能的两种实现方式：一种是使用blob+FileReader，另一种是使用layUI自带的参数。通过选择文件后点击文件名，在页面中间弹窗内预览图片。其中，layUI自带的参数实现了图片预览功能。该功能依赖于layUI的上传模块，并使用了blob和FileReader来读取本地文件并获取图像的base64编码。点击文件名时会执行See()函数。摘要长度为169字。 ...
                        [详细]
                    
                    

                    
                        蜡笔小新   2023-12-14 17:06:58
                    

                

                
                                
                    
                        css
                        Java实战之电影在线观看系统的实现
                    

                    
                                                
                            
                        
                                                
                        本文介绍了Java实战之电影在线观看系统的实现过程。首先对项目进行了简述，然后展示了系统的效果图。接着介绍了系统的核心代码，包括后台用户管理控制器、电影管理控制器和前台电影控制器。最后对项目的环境配置和使用的技术进行了说明，包括JSP、Spring、SpringMVC、MyBatis、html、css、JavaScript、JQuery、Ajax、layui和maven等。 ...
                        [详细]
                    
                    

                    
                        蜡笔小新   2023-12-14 15:52:03
                    

                

                
                                
                    
                        css
                        HDU 2372 El Dorado（DP）的最长上升子序列长度求解方法
                    

                    
                                                
                            
                        
                                                
                        本文介绍了解决HDU 2372 El Dorado问题的一种动态规划方法，通过循环k的方式求解最长上升子序列的长度。具体实现过程包括初始化dp数组、读取数列、计算最长上升子序列长度等步骤。 ...
                        [详细]
                    
                    

                    
                        蜡笔小新   2023-12-14 15:08:18
                    

                

                
                                
                    
                        layout
                        android listview OnItemClickListener失效原因
                    

                    
                                                
                            
                        
                                                
                        最近在做listview时发现OnItemClickListener失效的问题，经过查找发现是因为button的原因。不仅listitem中存在button会影响OnItemClickListener事件的失效，还会导致单击后listview每个item的背景改变，使得item中的所有有关焦点的事件都失效。本文给出了一个范例来说明这种情况，并提供了解决方法。 ...
                        [详细]
                    
                    

                    
                        蜡笔小新   2023-12-14 14:25:50
                    

                

                
                                
                    
                        css
                        OC学习笔记之@property和@synthesize
                    

                    
                                                
                        本文介绍了OC学习笔记中的@property和@synthesize，包括属性的定义和合成的使用方法。通过示例代码详细讲解了@property和@synthesize的作用和用法。 ...
                        [详细]
                    
                    

                    
                        蜡笔小新   2023-12-14 12:05:06
                    

                

                
                                
                    
                        css
                        后台获取视图对应的字符串
                    

                    
                                                
                            
                        
                                                
                        1.帮助类后台获取视图对应的字符串publicclassViewHelper{将View输出为字符串(注：不会执行对应的ac ...
                        [详细]
                    
                    

                    
                        蜡笔小新   2023-12-13 18:03:01
                    

                

                
                                
                    
                        console
                        如何通过全新应用内评价获取更多优质用户反馈？
                    

                    
                                                
                        Google Play推出全新的应用内评价API，帮助开发者获取更多优质用户反馈。用户每天在Google Play上发表数百万条评论，这有助于开发者了解用户喜好和改进需求。开发者可以选择在适当的时间请求用户撰写评论，以获得全面而有用的反馈。全新应用内评价功能让用户无需返回应用详情页面即可发表评论，提升用户体验。 ...
                        [详细]
                    
                    

                    
                        蜡笔小新   2023-12-13 17:23:03
                    

                

                
                                
                    
                        css
                        猜字母游戏
                    

                    
                                                
                            
                        
                                                
                        猜字母游戏猜字母游戏——设计数据结构猜字母游戏——设计程序结构猜字母游戏——实现字母生成方法猜字母游戏——实现字母检测方法猜字母游戏——实现主方法1猜字母游戏——设计数据结构1.1 ...
                        [详细]
                    
                    

                    
                        蜡笔小新   2023-12-13 12:04:03
                    

                

                
                                
                    
                        css
                        CentOS 7部署KVM虚拟化环境之一架构介绍
                    

                    
                                                
                            
                        
                                                
                        本文介绍了CentOS 7部署KVM虚拟化环境的架构，详细解释了虚拟化技术的概念和原理，包括全虚拟化和半虚拟化。同时介绍了虚拟机的概念和虚拟化软件的作用。 ...
                        [详细]
                    
                    

                    
                        蜡笔小新   2023-12-12 21:38:57
                    

                

                
                                
                    
                        css
                        position属性absolute与relative的区别和用法详解
                    

                    
                                                
                            
                        
                                                
                        本文详细解读了CSS中的position属性absolute和relative的区别和用法。通过解释绝对定位和相对定位的含义，以及配合TOP、RIGHT、BOTTOM、LEFT进行定位的方式，说明了它们的特性和能够实现的效果。同时指出了在网页居中时使用Absolute可能会出错的原因，即以浏览器左上角为原始点进行定位，不会随着分辨率的变化而变化位置。最后总结了一些使用这两个属性的技巧。 ...
                        [详细]
                    
                    

                    
                        蜡笔小新   2023-12-12 13:16:49
                    

                

                
                                
                    
                        css
                        前端人员必须知道的三个问题及其发展阶段
                    

                    
                                                
                        本文介绍了前端人员必须知道的三个问题，即前端都做哪些事、前端都需要哪些技术，以及前端的发展阶段。初级阶段包括HTML、CSS、JavaScript和jQuery的基础知识。进阶阶段涵盖了面向对象编程、响应式设计、Ajax、HTML5等新兴技术。高级阶段包括架构基础、模块化开发、预编译和前沿规范等内容。此外，还介绍了一些后端服务，如Node.js。 ...
                        [详细]
                    
                    

                    
                        蜡笔小新   2023-12-12 12:45:59
                    

                

                
                                
                    
                        dom
                        【shell】网络处理：判断IP是否在网段、两个ip是否同网段、IP地址范围、网段包含关系
                    

                    
                                                
                            
                        
                                                
                        本文介绍了使用shell脚本判断IP是否在同一网段、判断IP地址是否在某个范围内、计算IP地址范围、判断网段之间的包含关系的方法和原理。通过对IP和掩码进行与计算，可以判断两个IP是否在同一网段。同时，还提供了一段用于验证IP地址的正则表达式和判断特殊IP地址的方法。 ...
                        [详细]
                    
                    

                    
                        蜡笔小新   2023-12-12 11:19:14
                    

                

                
                                
                    
                        css
                        React基础篇一 - JSX语法扩展与使用
                    

                    
                                                
                            
                        
                                                
                        本文介绍了React基础篇一中的JSX语法扩展与使用。JSX是一种JavaScript的语法扩展，用于描述React中的用户界面。文章详细介绍了在JSX中使用表达式的方法，并给出了一个示例代码。最后，提到了JSX在编译后会被转化为普通的JavaScript对象。 ...
                        [详细]
                    
                    

                    
                        蜡笔小新   2023-12-11 11:37:05

















    

    
        
            
            
                
                
            

            
                炫彩十字绣I_775            

            
                这个家伙很懒，什么也没留下！            


        
    

    
    

    
    

    
        Tags | 热门标签
        
            
                                
                    console
                
                                
                    dom
                
                                
                    上传
                
                                
                    icons
                
                                
                    button
                
                                
                    cookies
                
                                
                    firefox
                
                                
                    html5
                
                                
                    build
                
                                
                    json
                
                                
                    svg
                
                                
                    npm
                
                                
                    layout
                
                                
                    node.js
                
                                
                    javascript
                
                                
                    webkit
                
                                
                    dialog
                
                                
                    vue
                
                                
                    v8
                
                                
                    vue.js
                
                                
                    微信开发
                
                                
                    chrome
                
                                
                    ajax
                
                                
                    hybrid
                
                                
                    css
                
                                
                    scheme
                
                                
                    overflow
                
                                
                    iframe
                
                                
                    scroll
                
                                
                    hover
                
                                
            
        
    

    
    
        
            
            
        
        RankList | 热门文章
        
            
                                
                    1git 删除右键菜单项
                
                                
                    2关于this的又一个问题
                
                                
                    3《咏露》翻译 原文赏析诗人唐董思恭
                
                                
                    4[bzoj2662][BeiJing wc2012]冻结——分层图最短路
                
                                
                    5Add a new lint `ptr_as_ptr`
                
                                
                    6Eureka 源码解析 —— 应用实例注册发现（八）之覆盖状态
                
                                
                    7如何在 C# 中创建异步方法？
                
                                
                    8华为手机锁屏为什么设置不了
                
                                
                    9解锁新姿势：FairyGUI在Unity中遇见的问题第三弹
                
                                
                    10oracle如何放大字号,oracle调节字体大小
                
                                
                    11Android重新编译OpenCV+contrib4.3.0模块
                
                                
                    12[幻灯片]软件需求设计方法学全程实例剖析01概述
                
                                
                    13matlab数值积分计算核,matlab 数值积分计算 求指导数学小木虫学术 科研 互动社区...
                
                                
                    14anaconda 免费吗[anaconda使用教程]
                
                                
                    15NEFU 628 Garden visiting (数论)