浅谈Angular中的DOM操作

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

@Component({

  selector: 'app-news',

  templateUrl: './news.component.html',

  styleUrls: ['./news.component.less']

})

export class NewsComponent implements OnInit {

  //获取Dom

  @ViewChild('myBox')

  public myBoxIn: any;

  @ViewChild('header')

  public header: any;

  constructor() { }

  ngOnInit(): void {

    // console.log(this.myBoxIn)

  }

  //处理dom节点

  ngAfterViewInit() {

    console.log(this.myBoxIn.nativeElement)

    //父组件获取到了整个子组件header

    console.log('父组件获取到了整个子组件header')

    console.log(this.header)

  }

  //获取子组件header的属性

  getChildProp() {

    console.log(this.header.title)

  }

  //获取子组件header的方法

  getChildMethod() {

    console.log(this.header.headRun)

    this.header.headRun();

  }

}

// 父组件   news   引入 <app-header #header></app-header>

// 子组件  header

// 父组件 得到 子组件的 数据 和 方法   ---   子组件 传 值给父组件 

// 总结：

// 1. 父组件中调用子组件的时候， 给子组件一个名称

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

// 2. 在父组件引入viewChild

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

// @ViewChild('header')

// public header:any;

// 3. 已经可以在父组件调用子组件的属性和方法了

// 父组件传值给子组件  @input   -- 子组件 得到 父组件的 数据 和 方法

// 父组件： home

// 子组件： header