ngAfterViewInit(){

    var boxDom:any=document.getElementById('box');

    boxDom.style.color='red';

}

<div #myattr></div>

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

@ViewChild('myattr',{static:true}) eleRef: ElementRef;

ngAfterViewInit(){

    let attrEl = this.eleRef.nativeElement;

}

<app-footer #footerChild></app-footer>

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

@ViewChild('footerChild',{static:true}) footer;

run(){

    this.footer.footerRun();

}

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

<div #myBox>

   我是一个dom节点

</div>

<button (click)="getChildRun()">获取子组件的方法</button>

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

@Component({

  selector: 'app-news',

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

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

})

export class NewsComponent implements OnInit {

  //获取dom节点

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

  //获取一个组件

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

  constructor() { }

  ngOnInit() {

  }

  ngAfterViewInit(): void {

    console.log(this.myBox.nativeElement);

    this.myBox.nativeElement.style.width='100px';

    this.myBox.nativeElement.style.height='100px';

    this.myBox.nativeElement.style.background='red';

    console.log(this.myBox.nativeElement.innerHTML);

  }

  getChildRun(){

    //调用子组件里面的方法

     this.header.run();

  }

}

  //获取header组件

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