Angular 中的 Dom 操作以及@ViewChild 、 Angular 执行 css3 动画

 

 

一、Angular 中的 dom 操作（原生 js）

ngAfterViewInit(){
var boxDom:any=document.getElementById('box');
boxDom.style.color='red';
}

二、Angular 中的 dom 操作（ViewChild ）

import { Component ,ViewChild,ElementRef} from '@angular/core';


@ViewChild('myattr') myattr: ElementRef;

<div #myattr></div>

ngAfterViewInit(){
let attrEl = this.myattr.nativeElement;
}

 

import { Component, OnInit ,ViewChild} from '@angular/core';

@Component({
  selector: 'app-learn-dom',
  templateUrl: './learn-dom.component.html',
  styleUrls: ['./learn-dom.component.scss']
})
export class LearnDomComponent implements OnInit {

  #获取dom节点
  @ViewChild('myBox') myBox:any;

  constructor() { }

  ngOnInit(): void {

//生命周期函数
//组件和指令初始化完成，并不是真正的dom加载完成
// let oBox:any=document.getElementById("box");
// console.log(oBox.innerHTML);
// oBox.style.color='red';



  }

  ngAfterViewInit(){
    // let oBox1:any=document.getElementById('box1');
    // console.log(oBox1.innerHTML);
    // oBox1.style.color='blue'

    console.log(this.myBox.nativeElement)
    this.myBox.nativeElement.style.color='yellow'



  }

}

 

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

1.调用子组件给子组件定义一个名称

例如在new组件调用header组件

在new.component.html中加入

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

 

在news.components.ts

 

 

在news组件引入header组件中的run（）方法