Angular 中的 dom 操作(ViewChild)以及父子组件中通过 ViewChild 调用子组件的方法
Posted loaderman
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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(); } }
效果:
以上是关于Angular 中的 dom 操作(ViewChild)以及父子组件中通过 ViewChild 调用子组件的方法的主要内容,如果未能解决你的问题,请参考以下文章
AngularJS操作DOM——angular.element