五、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;
}

点击英雄主题色后的效果

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

裂魂人1214

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值