用角度改变svg图标组件的颜色答案

【问题标题】：change color of svg icon component with angular用角度改变svg图标组件的颜色
【发布时间】：2019-05-26 14:25:26
【问题描述】：

这里是 typescript 的初学者，更多的是 css 和第一次玩 SVG。

我正在尝试制作一个加热器 svg 图标，它的四个波在加热器加热阶段的功能中改变颜色。

在控制台日志中，它似乎在控制器上工作，但我无法正确显示颜色。

HTML：

<div>
  <svg width="20%" height="30%"  viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" class="icon">
    <g>
     <title>background</title>
     <rect x="-1" y="-1" width="1026" height="1026" id="canvas_background" fill="none"/>
    </g>

    <g>
    <title>Layer 1</title>
      <!--top line-->
      <path d="m910,782.001l-800,0c-8.837,0 -16,-7.163 -16,-16s7.163,-16 16,-16l800,0c8.837,0 16,7.163 16,16s-7.163,16 -16,16zm-800,112l800,0c8.837,0 16,7.163 16,16s-7.163,16 -16,16l-800,0c-8.837,0 -16,-7.163 -16,-16s7.163,-16 16,-16z" id="svg_5"/>

      <!--wave 1-->
      <path d="m29,844.001zm188.237,-149.935c-0.078,0.081 -0.145,0.169 -0.225,0.249c-0.048,0.048 -0.101,0.087 -0.149,0.135c-0.188,0.19 -0.37,0.384 -0.559,0.573l-0.036,-0.036c-6.289,5.554 -15.887,5.342 -21.902,-0.672c-6.014,-6.014 -6.227,-15.611 -0.672,-21.899l-0.036,-0.036c81.293,-81.282 81.293,-159.067 0,-240.35l0.708,-0.708c-93.799,-93.787 -93.799,-176.847 0,-270.634c6.253,-6.253 16.392,-6.253 22.645,0c6.253,6.252 6.253,16.39 0,22.642c-81.293,81.282 -81.293,144.067 0,225.35l-0.011,0.321l-0.696,0.386c93.484,93.472 93.787,190.818 0.933,284.679z" id="svg_1"/>
      <!--wave 2-->
      <path d="m218,843.001zm188.237,-149.935c-0.078,0.081 -0.145,0.169 -0.225,0.249c-0.048,0.048 -0.101,0.087 -0.149,0.135c-0.188,0.19 -0.37,0.384 -0.559,0.573l-0.036,-0.036c-6.289,5.554 -15.887,5.342 -21.902,-0.672c-6.014,-6.014 -6.227,-15.611 -0.672,-21.899l-0.036,-0.036c81.293,-81.282 81.293,-159.067 0,-240.35l0.708,-0.708c-93.799,-93.787 -93.799,-176.847 0,-270.634c6.253,-6.253 16.392,-6.253 22.645,0c6.253,6.252 6.253,16.39 0,22.642c-81.293,81.282 -81.293,144.067 0,225.35l-0.011,0.321l-0.696,0.386c93.484,93.472 93.787,190.818 0.933,284.679z" id="svg_2"/>
      <!--wave 3-->
      <path d="m426,843.001zm188.237,-149.935c-0.078,0.081 -0.145,0.169 -0.225,0.249c-0.048,0.048 -0.101,0.087 -0.149,0.135c-0.188,0.19 -0.37,0.384 -0.559,0.573l-0.036,-0.036c-6.289,5.554 -15.887,5.342 -21.902,-0.672c-6.014,-6.014 -6.227,-15.611 -0.672,-21.899l-0.036,-0.036c81.293,-81.282 81.293,-159.067 0,-240.35l0.708,-0.708c-93.799,-93.787 -93.799,-176.847 0,-270.634c6.253,-6.253 16.392,-6.253 22.645,0c6.253,6.252 6.253,16.39 0,22.642c-81.293,81.282 -81.293,144.067 0,225.35l-0.011,0.321l-0.696,0.386c93.484,93.472 93.787,190.818 0.933,284.679z" id="svg_3"/>
      <!--wave 4-->
      <path d="m631,843.001zm188.237,-149.935c-0.078,0.081 -0.145,0.169 -0.225,0.249c-0.048,0.048 -0.101,0.087 -0.149,0.135c-0.188,0.19 -0.37,0.384 -0.559,0.573l-0.036,-0.036c-6.289,5.554 -15.887,5.342 -21.902,-0.672c-6.014,-6.014 -6.227,-15.611 -0.672,-21.899l-0.036,-0.036c81.293,-81.282 81.293,-159.067 0,-240.35l0.708,-0.708c-93.799,-93.787 -93.799,-176.847 0,-270.634c6.253,-6.253 16.392,-6.253 22.645,0c6.253,6.252 6.253,16.39 0,22.642c-81.293,81.282 -81.293,144.067 0,225.35l-0.011,0.321l-0.696,0.386c93.484,93.472 93.787,190.818 0.933,284.679z" id="svg_4"/>        
    </g>
  </svg>
</div>

脚本：

import { Component, Input, OnChanges } from '@angular/core';

@Component({
  selector: 'heater-svg',
  templateUrl: 'heater-svg.html'
})
export class HeaterSvgComponent implements OnChanges {
  @Input() stage: number = 0;

  constructor() {
  }

  ngOnChanges() {
    this.stageSet(this.stage);
  }

  stageSet(stagePercent: number) {
    let idList = ["svg_1", "svg_2", "svg_3", "svg_4" ];
    let stage: number = 0;

    if (stagePercent > 99) {
      stage = 4;
    } else if (stagePercent > 70) {
      stage = 3;
    } else if (stagePercent > 30) {
      stage = 2;
    } else if (stagePercent > 0) {
      stage = 1;
    }

    console.log(stage);  // <<<-----------------

    for (let i = 1; i < 5; i++) {
      let state = false;

      if (stage >= i) {
        state = true;
      }

      this.displayStage(idList[i-1], state);
    } 
  }

  displayStage(id: string, state: boolean) {
    let el = document.getElementById(id);

    if (el) {
      if (state) {
        console.log("fill in red");
        el.style.fill = '#ff3300';
      } else {
        el.style.fill = '#dadada';
      }
    }
  }
}

这在 ionic4 应用程序中使用，在 ion-slide oc 10 幻灯片中：

<heater-svg [stage]="channel.percentOut"></heater-svg>

displayStage 触发，console.log 正确记录数据，但是当我不静音 else 时，el.style.fill 不起作用，即便如此，它只会更改第一张幻灯片中的图标...

组件是否使用某种实例，每次使用 ccomponent 或资源时都有一些共享？

getElementById 是一个好方法吗？还是 fill 是更改 svg 颜色的更好方法？我认为数据 [stage] 处理正确。

【问题讨论】：

typescript 与颜色和 svg 无关。您正在谈论离子应用程序，首先您在其中安装了 Angular。请先学习一下。通过游览和文档后，您的所有问题都将得到回答 here。这个特定的问题可以回答，但你的问题是如此基本，所以我宁愿建议你从那里开始
嗨@smnbbrv。就像我指出的那样，我是一个真正的初学者，但起初，我是一个业余爱好者。我只了解角度的小东西。事实上，大多数时候，我不确定我所做的是否与 angular、typeScript、ionic 或 javascript 相关。这个模块是一个较大项目的最后一部分，Angular 的文档非常大。如果您至少可以指出我从哪里开始的提示...：P 我试图找到某个地方可以做我想做但没有成功的事情。
好的...我解决了组件教程。有些问题更清楚。但是我还没有找到解决问题的方法...我尝试了encapsulation: ViewEncapsulation.Native，但是之后，getElementById 不再起作用了...

标签： css angular components

【解决方案1】：

正如@smnbbrv 所建议的，我深入研究了角度，但也研究了一些 css 和 sass 规则...... 我的大部分问题是名称范围。我添加通过 getbyName 而不是 ById。

另外，我添加了添加和输入以将类实例链接到我的数据。

import { Component, Input, OnChanges } from '@angular/core';

@Component({
  selector: 'heater-svg',
  templateUrl: 'heater-svg.html',
})
export class HeaterSvgComponent implements OnChanges {

  @Input() id: number = 0;
  @Input('stage') stagePercent: number = 0;

  constructor() {
  }

  ngOnChanges() {
    let stage = this.getStageLevel(this.stagePercent);

    let els = document.getElementsByClassName('heater')[this.id];
    for (let i = 1; i <= 4; i++) {
      let state = false;      
      if (stage >= i) {
         state = true;
      }

      if (els) {
        let el = els.getElementsByClassName('wave')[i-1];//wave 0 is stage 1
        if (state) {
          this.setColor(el, '#ff3300');
        } else {
          this.setColor(el, '#dadada');
       }
      }
    } 
  }

  getStageLevel(percent: number) : number {
    let stage: number = 0;
    if (percent > 99) {
      stage = 4;
    } 
    else if (percent > 70) {
      stage = 3;
    }
    else if (percent > 30) {
      stage = 2;
    }
    else if (percent > 0) {
      stage = 1;
    } 
     return stage;
  }

  setColor(item, color) {
    item.style["fill"] = color;
  }

}

【讨论】：