美文网首页
如何在 ng2 中获取 组件的 DOM 元素

如何在 ng2 中获取 组件的 DOM 元素

作者: wangwanttt | 来源:发表于2017-04-26 13:43 被阅读146次

可以通过注入ElementRef,访问nativeElement属性获取原始DOM

import{Component,ElementRef}from'angular2/core';@Component({    selector:'App',    providers:[],    template:`

{{content}}

`})exportclassApp{    content:string='Hello Kittencup';constructor(publicelementRef:ElementRef){console.log(elementRef.nativeElement);    }ngAfterViewInit(){console.log(this.elementRef.nativeElement);    }}

在constructor里获取的时候,template中得变量还未被渲染出来,这时候DOM结构是

在ngAfterViewInit周期中,如果对组件的生命周期还不了解的话,可以看下这里生命周期钩子,template已经被渲染出来了,这时候DOM结构是

   

Hello Kittencup

你可以根据你的需求选择不同时期的DOM

相关文章

  • 如何在 ng2 中获取 组件的 DOM 元素

    可以通过注入ElementRef,访问nativeElement属性获取原始DOM import{Componen...

  • 19.ref获取DOM元素和组件

    1.ref获取vue中的DOM元素和组件:

  • Vue 组件

    全局组件引入 局部组件引入 ref获取dom节点、获取组件引用 ref在html元素获取的是dom节点ref在组件...

  • 15Angular templateRef和NgTemplate

    templateRef ViewChild 获取当前组件模板中的元素(组件、ng-template、dom){st...

  • vue中ref的作用

    基本用法 1 本页面获取dom元素 2 获取子组件中的data子组件 父组件 3 调用子组件中的方法子组件 父组件...

  • Vue之ref的使用

    1.基本用法,本页获取Dom元素节点 ref除了可以获取本页面的dom元素,还可以拿到 子组件中 的data 和 ...

  • useRef、useImperativeHandle

    useRef可以直接获取dom元素 useRef结合useImperativeHandle可以通过父组件获取子组件...

  • Vue中ref属性获取DOM元素和组件引用

    ref获取DOM元素vue中获取DOM元素不建议用js直接操作DOM,使用ref可达到操作DOM的效果写法:thi...

  • uniapp renderjs

    1. uniapp 获取dom元素的宽高 在uniapp 中由于他禁止操作dom,所以不能直接获取dom元素,框架...

  • vue中的$listeners属性作用

    当组件的根元素不具备一些DOM事件,但是根元素内部元素具备相对应的DOM事件,那么可以使用$listeners获取...

网友评论

      本文标题:如何在 ng2 中获取 组件的 DOM 元素

      本文链接:https://www.haomeiwen.com/subject/hfpizttx.html