Angular中如何操作DOM元素

这篇文章主要介绍“Angular中如何操作DOM元素”，在日常操作中，相信很多人在Angular中如何操作DOM元素问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”Angular中如何操作DOM元素”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！在angular获取DOM元素可以使用javascript的原生API，或者引入jQuery通过jquery对象操作DOM，但angular已经给我们提供了相应的API（ElementRef）来获取DOM元素，就没必要使用原生的API或者jQuery了。【相关教程推荐：《angular教程》】1、创建TestComponent组件，模板如下：test.component.html你好2、编写test.component.ts文件
我们来看看this.免费云主机、域名el.nativeElement是什么

所以就可以通过this.el.nativeElement.querySelector('#component')来操作对应的DOM元素。例如改变文字颜色就可以可以通过ViewChild获取组件，同样的还有ContentChild，ViewChildren和ContentChildren1、修改TestComponent组件，为对应元素加上模板变量，如下你好2、修改test.component.ts，如下：最终结果如下由结果我们可以知道，当使用ViewChild模板变量获取组件元素时，获取到的是组件导出的组件类（上例是PassBadgeComponent），这时候只可以操作组件中含有的属性。当使用ViewChild模板变量获取html元素时，获取到的时ElementRef类型的类，这时可以通过this.div.nativeElement.querySelector('span')等原生API来操作元素到此，关于“Angular中如何操作DOM元素”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注云技术网站，小编会继续努力为大家带来更多实用的文章！

相关推荐: jquery如何隐藏多个指定td

这篇文章主要介绍了jquery如何隐藏多个指定td的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇jquery如何隐藏多个指定td文章都会有所收获，下面我们一起来看看吧。 jquery隐藏多个指定td的方法：1、给需要隐藏的多个td…