五、angular6-获取dom元素

1.my-first-componnet.component.html

<!--
  index 索引  first是否第一个 last是否最后一个 odd是否奇数 even是否偶数 循环时可以去掉，用到的话就加上
-->
<div class="container" style="margin-top: 10px;">
  <div class="row" *ngFor="let hero of heros;index as index; first as first; last as last; odd as odd; even as even;">
    <span class="my-label">英雄：</span><span>{{hero.name}}</span>
    <span class="my-label">力量：</span><span>{{hero.strength}}</span>
    <span class="my-label">敏捷：</span><span>{{hero.agile}}</span>
    <span class="my-label">智力：</span><span>{{hero.intelligence}}</span>
    <div class="input-group mb-3">
      <input  type="text" [(ngModel)]="hero.speed">
      <div class="input-group-append">
        <button class="btn btn-primary" type="button" (click)="elementFn(hero.color)">英雄主题色</button>
      </div>
    </div>
    <div>
      <span>输入的移动速度是：{{hero.speed}}</span>
    </div>
  </div>
  <div *ngIf="showGameName">{{gameName}}</div>
  <!-- 获取dom元素-->
  <div class="row" #msgBox>英雄主题色</div>
</div>

2.my-first-componnet.component.ts

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

@Component({
  selector: 'app-my-first-componnet',
  templateUrl: './my-first-componnet.component.html',
  styleUrls: ['./my-first-componnet.component.css']
})
export class MyFirstComponnetComponent implements OnInit {
  speed: number = 0;
  heros : Array<{name: string, strength: number, agile:number, intelligence: number, color: string}> = [
    {name:'猎魂人', strength : 120, agile : 66, intelligence: 55, color: '#5afffa'},
    {name:'光法', strength : 60, agile : 58, intelligence : 130, color: '#fff224'},
    {name:'赏金', strength : 65, agile : 135, intelligence : 75, color: '#ff2e2c'}
  ]
  showGameName = true;
  gameName:string = "Dota";
  onClick(): void{
    alert("游戏名称为：" + this.gameName);
  }
  //获取dom元素
  @ViewChild('msgBox')
  msgBox: ElementRef
  //修改英雄色
  elementFn(color): void {
    //console.dir( this.msgBox.nativeElement.style.backgroundColor = color);
    this.renderer.setStyle(this.msgBox.nativeElement, 'backgroundColor', color);
    this.renderer.addClass(this.msgBox.nativeElement, 'renderCss');
  }

  constructor(private renderer: Renderer2) { }

  ngOnInit(): void {
  }

}

3.my-first-componnet.component.css

.my-label{
  margin-left: 10px;
  font-weight: 700;
}

.renderCss{
  height: 30px;
  width: 200px;
  font-size: 14px;
  font-weight: 700;
  border-radius: 5%;
  line-height: 30px;
  text-align: center;
  display: block;
}

点击英雄主题色，背景颜色就会改变，这时用到的就是获取dom元素，来更改，背景色，当然，也可以用ngStyle或者ngClass来修改，这里只讲操作dom元素，在修改颜色的时候，用到了Renderer2实例，Renderder2还有以下方法，有兴趣的同学可以试一下

export abstract class Renderer2 {
  abstract createElement(name: string, namespace?: string|null): any;
  abstract createComment(value: string): any;
  abstract createText(value: string): any;
  abstract setAttribute(el: any, name: string, value: string,
    namespace?: string|null): void;
  abstract removeAttribute(el: any, name: string, namespace?: string|null): void;
  abstract addClass(el: any, name: string): void;
  abstract removeClass(el: any, name: string): void;
  abstract setStyle(el: any, style: string, value: any, 
    flags?: RendererStyleFlags2): void;
  abstract removeStyle(el: any, style: string, flags?: RendererStyleFlags2): void;
  abstract setProperty(el: any, name: string, value: any): void;
  abstract setValue(node: any, value: string): void;
  abstract listen(
      target: 'window'|'document'|'body'|any, eventName: string,
      callback: (event: any) => boolean | void): () => void;
}

点击英雄主题色后的效果