angular 获取DOM元素 多种方式

第一种方式 ---ViewChild

<div #box>我是div----添加在html页面中</div>

@ViewChild('box') box: ElementRef;
constructor(){
//添加在ts文件中 该方法不可放在constructor中, 因为在这个时候页面的视图还没有被渲染,放在这里是无法获取到box元素的
}
ngOnInit() {
//在初始化的时候打印box
console.log(this.box.nativeElement);
}

第二种方式---ElementRef

<div class="box">我是div----添加在html页面中</div>

constructor(private el:ElementRef){
//添加在ts文件中 该方法不可放在constructor中, 因为在这个时候页面的视图还没有被渲染,放在这里是无法获取到box元素的
}
ngOnInit() {
//在初始化的时候打印box
console.log(this.el.nativeElement.querySelector('.box'));
}

  
第三种方式---ViewChildren

<div #divChild *ngFor="let item of list">我是div--{{item}}--添加在html页面中</div>
constructor(){}
public
list: any[] = [1, 1, 2, 3, 4, 5, 1, 5, 2];//列表
//添加在ts文件中 该注解不可放在constructor中, 因为在这个时候页面的视图还没有被渲染,放在这里是无法获取到box元素的
@ViewChildren('divChild') divChild: QueryList<any>;

ngOnInit() { }
ngAfterViewInit() {
//在初始化试图之后打印box
console.log(this.divChild);
this.divChild.forEach((child: ElementRef) => console.log(child.nativeElement))
}






posted @ 2021-04-28 18:06  攀上顶峰  阅读(3383)  评论(0编辑  收藏  举报