Angular7 DOM操作

Angular7 DOM操作

1.原生JS操作DOM

• ngOnInit(){} 只是组件和指令初始化完成，并不是Dom加载完成，但是可以在这里获取Dom节点，建议在angular中所有变量都指定类型
• ngAfterViewInit(){} 这个方法是所有视图加载完成之后的方法，应该在这里面获取Dom节点

2.ViewChild操作DOM

• 给要获取节点的元素起一个名字

  this is a box!

• 在TS文件中引入ViewChild
  import { Component, OnInit,ViewChild } from '@angular/core';
• 获取Dom节点（写在类中）
  @ViewChild("myBox") mybox: any;
• 在ngAfterViewInit(){}中this调用

ngAfterViewInit() {
    this.mybox.nativeElement.style.width = "200px";
    this.mybox.nativeElement.style.height = "200px";
    this.mybox.nativeElement.style.background = "pink";
}

3.父组件通过ViewChild调用子组件的方法

• 给子组件起一个名字
  
• 在父组件中获取
  @ViewChild("header") header: any;
• 在子组件页面中写一个方法

  run() {
    alert('我是子组件中的方法');
  }

• 在父组件中写一个button
  调用子组件中的方法

• 在父组件中调用子组件的方法

  //调用子组件中的方法
  go() {
    this.header.run();
  }