如何在 Angular 2 中获取`DOM 元素`? [英] How to get `DOM Element` in Angular 2?

查看：25 发布时间：2021/12/2 20:23:57 angular dom

本文介绍了如何在 Angular 2 中获取`DOM 元素`?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个具有

元素的组件.它的 (click) 事件会将其更改为 </code>.因此，用户可以编辑数据.我的问题是:<em class="showen"></em></p> <p class="en">I have a component that has a <code><p></code> element. It's <code>(click)</code> event will change it into a <code><textarea></code>. So, the user can edit the data. My question is:</p> <ul class="cn"><li>如何将焦点放在 <code>textarea</code> 上?</li><li>如何获取元素，以便在其上应用 <code>.focus()</code> ?</li><li>我可以避免使用 <code>document.getElementById()</code> 吗?</li><em class="showen"></em></ul> <ul class="en"> <li>How can I make the focus on the <code>textarea</code>?</li> <li>How can I get the element, so I can apply the <code>.focus()</code> on it?</li> <li>Can I avoid using <code>document.getElemenntById()</code>?</li> </ul> <p class="cn">我尝试使用ElementRef"和@ViewChild()"但是似乎我错过了一些东西:<em class="showen"></em></p> <p class="en">I have tried to use the "ElementRef" and the "@ViewChild()" however it seems that I'm missing something:</p> <p class="cn"><strong>app.component.ts</strong></p> <pre><code><code>@ViewChild('tasknoteId') taskNoteRef:ElementRef; noteEditMode: boolean = false; get isShowNote (){ return !this.noteEditMode && this.todo.note ? true : false; } taskNote: string; toggleNoteEditMode () { this.noteEditMode = !this.noteEditMode; this.renderer.invokeElementMethod( this.taskNoteRef.nativeElement,'focus' ); } </code></code></pre> <p class="cn"><strong>app.component.html</strong></p> <pre><code><code><span class="the-insert"> <form [hidden]="!noteEditMode && todo.note"> <textarea #tasknoteId id="tasknote" name="tasknote" [(ngModel)]="todo.note" placeholder="{{ notePlaceholder }}" style="background-color:pink" (blur)="updateNote()" (click)="toggleNoteEditMode()" [autofocus]="noteEditMode" [innerHTML]="todo.note"> </textarea> </form> </span> </code></code></pre> <p class="cn"></p> <h3 class="best_ans mt-1">推荐答案</h3> <p class="cn">使用 <strong>ViewChild</strong> 和 <strong>#localvariable</strong> 如下所示，<em class="showen"></em></p> <p class="en">Use <strong>ViewChild</strong> with <strong>#localvariable</strong> as shown here,</p> <pre><code><code><textarea #someVar id="tasknote" name="tasknote" [(ngModel)]="taskNote" placeholder="{{ notePlaceholder }}" style="background-color: pink" (blur)="updateNote() ; noteEditMode = false " (click)="noteEditMode = false"> {{ todo.note }} </textarea> </code></code></pre> <p class="cn">在组件中，</p> <pre><code><code>import {ElementRef} from '@angular/core'; @ViewChild('someVar') el:ElementRef; ngAfterViewInit() { this.el.nativeElement.focus(); } </code></code></pre> <p class="cn"><hr></p> <pre><code><code>import {ElementRef} from '@angular/core'; @ViewChild('someVar') el:ElementRef; constructor(private rd: Renderer) {} ngAfterViewInit() { this.rd.invokeElementMethod(this.el.nativeElement,'focus'); } </code></code></pre> <p class="cn"><小时><strong>更新于 22/03(March)/2017</strong></p> <p class="cn">请注意 <strong>Angular v4.0.0-rc.3 (2017-03-10)</strong> 中的一些内容已更改.由于 Angular 团队将弃用 <strong><code>invokeElementMethod</code></strong>，以上代码不能再使用.<em class="showen"></em></p> <p class="en">Please note from <strong>Angular v4.0.0-rc.3 (2017-03-10)</strong> few things have been changed. Since Angular team will deprecate <strong><code>invokeElementMethod</code></strong>, above code no longer can be used.</p> <p class="cn">重大变化</p> <p class="cn">从 4.0 rc.1 开始:<em class="showen"></em></p> <p class="en">since 4.0 rc.1:</p> <p class="cn">将 RendererV2 重命名为 Renderer2<br>将 RendererTypeV2 重命名为 RendererType2<bR>将 RendererFactoryV2 重命名为 RendererFactory2<em class="showen"></em></p> <p class="en">rename RendererV2 to Renderer2<br> rename RendererTypeV2 to RendererType2<bR> rename RendererFactoryV2 to RendererFactory2</p> <p class="cn"></p> <pre><code><code>import {ElementRef,Renderer2} from '@angular/core'; @ViewChild('someVar') el:ElementRef; constructor(private rd: Renderer2) {} ngAfterViewInit() { console.log(this.rd); this.el.nativeElement.focus(); //<<<=====same as oldest way } </code></code></pre> <p class="cn"><strong><code>console.log(this.rd)</code></strong> 会给你以下方法，你现在可以看到 <strong><code>invokeElementMethod</code></strong>不在这里.<em>附加 img 尚未记录.</em></p> <p class="cn"><strong>注意:</strong>你可以使用<strong><code>Rendere2</code></strong>的以下方法有/没有<strong>ViewChild变量</strong>来做很多事情.<em class="showen"></em></p> <p class="en"><strong>NOTE:</strong> You can use following methods of <strong><code>Rendere2</code></strong> with/without <strong>ViewChild variable</strong> to do so many things.</p> <p class="cn"></p> <p>这篇关于如何在 Angular 2 中获取`DOM 元素`?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！</p> </div> <div class="arc-body-main-more"> <span onclick="unlockarc('2632663');">查看全文</span> </div> </div> <div> </div> <div class="wwads-cn wwads-horizontal" data-id="166" style="max-width:100%;border: 4px solid #666;"></div> </div> </article> <div id="arc-ad-2" class="mb-1"> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5038752844014834" crossorigin="anonymous"></script> <ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5038752844014834" data-ad-slot="3921941283"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <div class="widget bgwhite radius-1 mb-1 shadow widget-rel"> <h5>相关文章</h5> <ul> <li> <a target="_blank" title="如何获取Angular 2中的dom元素" href="/1887886.html"> 如何获取Angular 2中的dom元素; </a> </li> <li> <a target="_blank" title="如何在Angular2中获取（DOM）元素的宽度" href="/1011888.html"> 如何在Angular2中获取（DOM）元素的宽度; </a> </li> <li> <a target="_blank" title="如何在 Angular2 中获取(DOM)元素的宽度" href="/2514902.html"> 如何在 Angular2 中获取(DOM)元素的宽度; </a> </li> <li> <a target="_blank" title="如何在Angular 2中获取`DOM Element`？" href="/2054572.html"> 如何在Angular 2中获取`DOM Element`？; </a> </li> <li> <a target="_blank" title="Angular 2 测试 - 获取 DOM 元素样式" href="/2802709.html"> Angular 2 测试 - 获取 DOM 元素样式; </a> </li> <li> <a target="_blank" title="Angular 2测试 - 获取DOM元素样式" href="/954072.html"> Angular 2测试 - 获取DOM元素样式; </a> </li> <li> <a target="_blank" title="如何在Angular中获取DOM节点属性" href="/2054805.html"> 如何在Angular中获取DOM节点属性; </a> </li> <li> <a target="_blank" title="页面加载后如何在Angular 4中获取(DOM)元素的宽度" href="/1925101.html"> 页面加载后如何在Angular 4中获取(DOM)元素的宽度; </a> </li> <li> <a target="_blank" title="如何在JavaScript中获取DOM元素的HTML" href="/651056.html"> 如何在JavaScript中获取DOM元素的HTML; </a> </li> <li> <a target="_blank" title="如何在 javascript 中获取 DOM 元素的 HTML" href="/2684373.html"> 如何在 javascript 中获取 DOM 元素的 HTML; </a> </li> <li> <a target="_blank" title="如何获取angular2组件的父DOM元素引用" href="/1894634.html"> 如何获取angular2组件的父DOM元素引用; </a> </li> <li> <a target="_blank" title="Angular：DOM中的条件元素？" href="/866729.html"> Angular：DOM中的条件元素？; </a> </li> <li> <a target="_blank" title="如何获取特定元素中的DOM元素？" href="/2060337.html"> 如何获取特定元素中的DOM元素？; </a> </li> <li> <a target="_blank" title="如何访问 Angular 指令中的 dom 元素" href="/2523139.html"> 如何访问 Angular 指令中的 dom 元素; </a> </li> <li> <a target="_blank" title="如何在新窗口中获取dom元素？" href="/1008831.html"> 如何在新窗口中获取dom元素？; </a> </li> <li> <a target="_blank" title="如何在PHPFox中通过Ajax获取任何DOM元素" href="/1824177.html"> 如何在PHPFox中通过Ajax获取任何DOM元素; </a> </li> <li> <a target="_blank" title="如何在Jasmine中通过类名获取Angular 2元素" href="/954047.html"> 如何在Jasmine中通过类名获取Angular 2元素; </a> </li> <li> <a target="_blank" title="在Angular 2中操纵Dom" href="/1020641.html"> 在Angular 2中操纵Dom; </a> </li> <li> <a target="_blank" title="Angular 2获取宿主元素参考" href="/1895865.html"> Angular 2获取宿主元素参考; </a> </li> <li> <a target="_blank" title="如何在 Angular 2 中获取 JSON 文件" href="/2632670.html"> 如何在 Angular 2 中获取 JSON 文件; </a> </li> <li> <a target="_blank" title="如何在Angular 2中获取JSON文件" href="/1504420.html"> 如何在Angular 2中获取JSON文件; </a> </li> <li> <a target="_blank" title="如何从Angular 2的QueryList中获取子元素?" href="/2175373.html"> 如何从Angular 2的QueryList中获取子元素?; </a> </li> <li> <a target="_blank" title="如何在PHP中迭代DOM元素？" href="/651198.html"> 如何在PHP中迭代DOM元素？; </a> </li> <li> <a target="_blank" title="如何在JQuery中操作DOM元素" href="/1196967.html"> 如何在JQuery中操作DOM元素; </a> </li> <li> <a target="_blank" title="如何在localstorage中缓存DOM元素？" href="/1202696.html"> 如何在localstorage中缓存DOM元素？; </a> </li> </ul> </div> <div class="mb-1"> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5038752844014834" crossorigin="anonymous"></script> <ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5038752844014834" data-ad-slot="3921941283"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> <div class="side"> <div class="widget widget-side bgwhite mb-1 shadow"> <h5>其他开发最新文章</h5> <ul> <li> <a target="_blank" title="拒绝显示一个框架，因为它将'X-Frame-Options'设置为'sameorigin'" href="/893060.html"> 拒绝显示一个框架，因为它将'X-Frame-Options'设置为'sameorigin'; </a> </li> <li> <a target="_blank" title="什么是＆QUOT; AW＆QUOT;在部分标志属性是什么意思？" href="/303988.html"> 什么是＆QUOT; AW＆QUOT;在部分标志属性是什么意思？; </a> </li> <li> <a target="_blank" title="在运行npm install命令时获取'npm WARN弃用'警告" href="/840917.html"> 在运行npm install命令时获取'npm WARN弃用'警告; </a> </li> <li> <a target="_blank" title="cmake无法找到openssl" href="/516280.html"> cmake无法找到openssl; </a> </li> <li> <a target="_blank" title="从Spark的scala中的* .tar.gz压缩文件中读取HDF5文件" href="/850628.html"> 从Spark的scala中的* .tar.gz压缩文件中读取HDF5文件; </a> </li> <li> <a target="_blank" title="Twitter :: Error :: Forbidden - 无法验证您的凭据" href="/630061.html"> Twitter :: Error :: Forbidden - 无法验证您的凭据; </a> </li> <li> <a target="_blank" title="我什么时候需要一个fb：app_id或者fb：admins？" href="/747981.html"> 我什么时候需要一个fb：app_id或者fb：admins？; </a> </li> <li> <a target="_blank" title="将.db文件导入R" href="/902960.html"> 将.db文件导入R; </a> </li> <li> <a target="_blank" title="npm通知创建一个lockfile作为package-lock.json。你应该提交这个文件" href="/744854.html"> npm通知创建一个lockfile作为package-lock.json。你应该提交这个文件; </a> </li> <li> <a target="_blank" title="拒绝执行内联脚本，因为它违反了以下内容安全策略指令：“script-src'self'”" href="/819167.html"> 拒绝执行内联脚本，因为它违反了以下内容安全策略指令：“script-src'self'”; </a> </li> </ul> </div> <div class="widget widget-side bgwhite mb-1 shadow"> <h5> 热门教程 </h5> <ul> <li> <a target="_blank" title="Java教程" href="/OnLineTutorial/java/index.html"> Java教程 </a> </li> <li> <a target="_blank" title="Apache ANT 教程" href="/OnLineTutorial/ant/index.html"> Apache ANT 教程 </a> </li> <li> <a target="_blank" title="Kali Linux教程" href="/OnLineTutorial/kali_linux/index.html"> Kali Linux教程 </a> </li> <li> <a target="_blank" title="JavaScript教程" href="/OnLineTutorial/javascript/index.html"> JavaScript教程 </a> </li> <li> <a target="_blank" title="JavaFx教程" href="/OnLineTutorial/javafx/index.html"> JavaFx教程 </a> </li> <li> <a target="_blank" title="MFC 教程" href="/OnLineTutorial/mfc/index.html"> MFC 教程 </a> </li> <li> <a target="_blank" title="Apache HTTP客户端教程" href="/OnLineTutorial/apache_httpclient/index.html"> Apache HTTP客户端教程 </a> </li> <li> <a target="_blank" title="Microsoft Visio 教程" href="/OnLineTutorial/microsoft_visio/index.html"> Microsoft Visio 教程 </a> </li> </ul> </div> <div class="widget widget-side bgwhite mb-1 shadow"> <h5> 热门工具 </h5> <ul> <li> <a target="_blank" title="Java 在线工具" href="/Onlinetools/details/4"> Java 在线工具 </a> </li> <li> <a target="_blank" title="C(GCC) 在线工具" href="/Onlinetools/details/6"> C(GCC) 在线工具 </a> </li> <li> <a target="_blank" title="PHP 在线工具" href="/Onlinetools/details/8"> PHP 在线工具 </a> </li> <li> <a target="_blank" title="C# 在线工具" href="/Onlinetools/details/1"> C# 在线工具 </a> </li> <li> <a target="_blank" title="Python 在线工具" href="/Onlinetools/details/5"> Python 在线工具 </a> </li> <li> <a target="_blank" title="MySQL 在线工具" href="/Onlinetools/Dbdetails/33"> MySQL 在线工具 </a> </li> <li> <a target="_blank" title="VB.NET 在线工具" href="/Onlinetools/details/2"> VB.NET 在线工具 </a> </li> <li> <a target="_blank" title="Lua 在线工具" href="/Onlinetools/details/14"> Lua 在线工具 </a> </li> <li> <a target="_blank" title="Oracle 在线工具" href="/Onlinetools/Dbdetails/35"> Oracle 在线工具 </a> </li> <li> <a target="_blank" title="C++(GCC) 在线工具" href="/Onlinetools/details/7"> C++(GCC) 在线工具 </a> </li> <li> <a target="_blank" title="Go 在线工具" href="/Onlinetools/details/20"> Go 在线工具 </a> </li> <li> <a target="_blank" title="Fortran 在线工具" href="/Onlinetools/details/45"> Fortran 在线工具 </a> </li> </ul> </div> </div> </div> <script type="text/javascript">var eskeys = '如,何在,angular,2,中,获取,dom,元素'; var cat = 'cc';';//other-dev</script> </div> <div id="pop" onclick="pophide();"> <div id="pop_body" onclick="event.stopPropagation();"> <h6 class="flex flex101"> 登录 <span onclick="pophide();">关闭</span> </h6> <div class="pd-1"> <div class="wxtip center"> <span>扫码关注<em>1秒</em>登录</span> </div> <div class="center"> <img id="qr" src="https://huajiakeji.com/Content/Images/qrydx.jpg" alt="" style="width:150px;height:150px;" /> </div> <div style="margin-top:10px;display:flex;justify-content: center;"> <input type="text" placeholder="输入验证码" id="txtcode" autocomplete="off" /> <input id="btngo" type="button" onclick="chk()" value="GO" /> </div> <div class="center" style="margin: 4px; font-size: .8rem; color: #f60;"> 发送“验证码”获取 <em style="padding: 0 .5rem;">|</em> <span style="color: #01a05c;">15天全站免登陆</span> </div> <div id="chkinfo" class="tip"></div> </div> </div> </div> <script type="text/javascript" src="https://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script> <script type="text/javascript" src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js"></script> <script type="text/javascript" src="https://img01.yuandaxia.cn/Scripts/highlight.min.js"></script> <script type="text/javascript" src="https://img01.yuandaxia.cn/Scripts/base.js?v=0.22"></script> <script type="text/javascript" src="https://img01.yuandaxia.cn/Scripts/tui.js?v=0.11"></script> <footer class="footer"> <div class="container"> <div class="flink mb-1"> 友情链接： <a href="https://www.it1352.com/" target="_blank">IT屋</a> <a href="https://huajiakeji.com/" target="_blank">Chrome插件</a> <a href="https://www.cnplugins.com/" target="_blank">谷歌浏览器插件</a> </div> <section class="copyright-section"> <a href="https://www.it1352.com" title="IT屋-程序员软件开发技术分享社区">IT屋</a> ©2016-2022 <a href="http://www.beian.miit.gov.cn/" target="_blank">琼ICP备2021000895号-1</a> <a href="/sitemap.html" target="_blank" title="站点地图">站点地图</a> <a href="/Home/Tags" target="_blank" title="站点标签">站点标签</a> <a target="_blank" alt="sitemap" href="/sitemap.xml">SiteMap</a> <a href="/1155981.html" title="IT屋-免责申明"><免责申明></a> 本站内容来源互联网,如果侵犯您的权益请联系我们删除. </section>  <script type="text/javascript"> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?0c3a090f7b3c4ad458ac1296cb5cc779"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <script type="text/javascript"> (function () { var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); </script> </div> </footer> </body> </html>