angular中获取dom元素
每次讲angular中的特性的时候总是习惯性地拿他和vue进行比较。vue中获取dom元素的方法 有两种1.通过js原生获取如果你想提取获取dom元素的话,有个条件是你得在 mounted 挂载之后的生命周期钩子函数中 进行调用 document.getElementById();document.querySelector();2. 就是 vue自带的 ref 给需要dom元素上加一个 ref=
每次讲angular中的特性的时候总是习惯性地拿他和vue进行比较。
vue中获取dom元素的方法 有两种
1.通过js原生获取
如果你想提取获取dom元素的话,有个条件是你得在 mounted 挂载之后的生命周期钩子函数中 进行调用 document.getElementById();document.querySelector();
2. 就是 vue自带的 ref 给需要dom元素上加一个 ref=“自定义名称” 然后 通过 this.$refs.自定义名称就可以获取到了
好了 复习完 vue的东西 今天就来不如正题 在 angular中获取dom元素
大体上和vue类似哈
// 现在组建的html文件中 书写 一个div元素
<div class="box">hello world</div>
然后我们就来获取一下哈
1.通过原生js
首先也是 在一个 dom元素加载完的 一个生命周期钩子函数中使用原生js的方式获取
这个钩子函数叫做
ngAfterViewInit(); // 使用这个方法 之前要做一些准备的哈
// 引入 AfterViewInit
import { Component, OnInit, AfterViewInit } from '@angular/core';
// 要实现 implements AfterViewInit 默认是没有
export class FormsComponent implements OnInit, AfterViewInit{
ngAfterViewInit(): void {
const oBox: any = document.querySelector('.box');
console.log(oBox);
}
}
最后也确实获取到了哈
2。通过angular自带的 ViewChild 方式获取
还是获取下 上面的那个 元素
不过在html上要有点变化了 不再使我们传统上的 id和class了
<div #box>hello world</div>
然后还是先引入这个 东西 ViewChild
import { Component, OnInit, ViewChild } from '@angular/core';
export class FormsComponent implements OnInit, AfterViewInit {
constructor() { }
@ViewChild('box') box: any;// ViewChild 装饰器里面的就是之前我们自定义的那个box
ngOnInit(): void {
}
ngAfterViewInit(): void {
console.log(this.box.nativeElement);
}
}
照样获取到了
更多推荐
所有评论(0)