Angular 8 学习 （六 viewchild操作DOM）

Angular可以有两种操作DOM的方式，一种原生的js操作DOM，一种viewchile操作

一 、首先讲一下原生js操作：

1.在html标签中加入id

<div id="div2">
    js 
</div>

2.在ts文件中使用原生js操作：

****注意的是在操作DOM的代码放在ngAfterViewInit()方法中：

  ngAfterViewInit(): void {
 
   var div2:any =  document.getElementById("div2");

   alert(div2); 
  }

二 、接下来使用viewchile操作：

1.在html中起名使用#名字

<div #div1>
    dmo 节点
</div>

2.在ts文件中引入viewchild

3.使用@ViewChild进行获取

 @ViewChild('div1', {static: true}) mydiv: any;

注意：我这里使用的是angular8，8以前的版本只要一个参数就可以

4.在生命周期函数中使用

 ngAfterViewInit(): void {
    
    console.log(this.mydiv)
    this.mydiv.nativeElement.style.color="pink";

  }

三 、父组件通过viewchild调用子组件的方法

这里我创建了两个组件，父组件为news ，子组件是header

现在news组件中要使用header子组件中的run方法：

1.给子组件起名

<h1>引入header</h1>

<app-header #header></app-header>

2.引入viewchild，和上面的一样

3.使用@ViewChild进行获取，同上

4.调用子组件中的run方法：

<br>
<h1>引入header</h1>

<app-header #header></app-header>

<button (click)="goHeaderRun()">news调用header的run方法</button>

  goHeaderRun(){
    this.header.run();
  }

记录不宜，求关注