Angular 8 学习 （六 viewchild操作DOM）

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

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

1.在html标签中加入id

    js 

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

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

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

   alert(div2); 
  }

二 、接下来使用viewchile操作：

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

    dmo 节点

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.给子组件起名

引入header

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

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

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

引入header



news调用header的run方法

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

记录不宜，求关注