Angular 中的 dom 操作(ViewChild)以及父子组件中通过 ViewChild 调用子组件的方法
<app-header #header></app-header> <div #myBox> 我是一个dom节点 </div> <button (click)="getChildRun()">获取子组件的方法</button>
/* ViewChild获取dom节点 1、模板中给dom起一个名字 <div #myBox> 我是一个dom节点 </div> 2、在业务逻辑里面引入ViewChild import { Component, OnInit,ViewChild} from '@angular/core'; 3、 写在类里面 @ViewChild('myBox') myBox:any; 4、ngAfterViewInit生命周期函数里面获取dom this.myBox.nativeElement */ import { Component, OnInit,ViewChild} from '@angular/core'; @Component({ selector: 'app-news', templateUrl: './news.component.html', styleUrls: ['./news.component.scss'] }) export class NewsComponent implements OnInit { //获取dom节点 @ViewChild('myBox') myBox:any; //获取一个组件 @ViewChild('header') header:any; constructor() { } ngOnInit() { } ngAfterViewInit(): void { console.log(this.myBox.nativeElement); this.myBox.nativeElement.style.width='100px'; this.myBox.nativeElement.style.height='100px'; this.myBox.nativeElement.style.background='red'; console.log(this.myBox.nativeElement.innerHTML); } getChildRun(){ //调用子组件里面的方法 this.header.run(); } }
效果:
最后,关注【码上加油站】微信公众号后,有疑惑有问题想加油的小伙伴可以码上加入社群,让我们一起码上加油吧!!!
posted on 2019-05-21 10:35 LoaderMan 阅读(1746) 评论(0) 编辑 收藏 举报