Angular6封装LED时钟数字组件

一、运行截图

　　截图1：

　　　　

　　截图2：

　　　　

二、代码

　　html代码：

<div class="time" >
  <ng-container #container>
  
  </ng-container>
</div>


<ng-template #child_elem>
  <div class="digit minutes">
    <div class="segment "></div>
    <div class="segment "></div>
    <div class="segment "></div>
    <div class="segment "></div>
    <div class="segment "></div>
    <div class="segment "></div>
    <div class="segment "></div>
  </div>
</ng-template>

<ng-template #point_elem>
  <div class="separator minutes"></div>
</ng-template>

　　css代码：

.time {
    height: 40px;
    position: absolute;
    top: 0;
    left: 28%;
    width: 100px;
    margin-left: 0px;
    text-align: center;
    z-index: 1000;
    margin-top: -7px;
  }
  .time .digit {
    width: 16px;
    height: 44px;
    position: relative;
    display: inline-block;
    margin-top: 2px;
  }
  
  
  .digit .segment {
    background:#11c4fb;
    border-radius:2px;
    position:absolute;
    opacity:0.1;
    transition:opacity 0.2s;
    -webkit-transition:opacity 0.2s;
    -ms-transition:opacity 0.2s;
    -moz-transition:opacity 0.2s;
    -o-transition:opacity 0.2s;
  }
  
  .digit .segment.on, .separator {
    opacity:1;
    background:#11c4fb;
    box-shadow:0 0 30px rgba(0,255,0,0.1);
    transition:opacity 0s;
    -webkit-transition:opacity 0s;
    -ms-transition:opacity 0s;
    -moz-transition:opacity 0s;
    -o-transition:opacity 0s;
  }
  
  .time .separator {
    width: 4px;
    height: 4px;
    background: #11c4fb;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    bottom: 10px;
  }
  
  
  .digit .segment:nth-child(1) {
    top: 10px;
    left: 4px;
    right: 4px;
    height: 2px;
    background: #11c4fb;
  }
  
  .digit .segment:nth-child(2) {
    top: 12px;
    right: 1px;
    width: 2px;
    height: 75px;
    height: calc(71% - 21px);
    background: #11c4fb;
  }
  
  .digit .segment:nth-child(3) {
    bottom: 10px;
    right: 1px;
    width: 2px;
    height: 72px;
    height: calc(71% - 21px);
    background: #11c4fb;
  }
  
  .digit .segment:nth-child(4) {
    bottom: 8px;
    right: 4px;
    height: 2px;
    left: 4px;
    background: #11c4fb;
  }
  
  .digit .segment:nth-child(5) {
    bottom: 12px;
    left: 2px;
    width: 2px;
    height: 75px;
    height: calc(70% - 24px);
    background: #11c4fb;
  }
  
  .digit .segment:nth-child(6) {
    top: 14px;
    left: 2px;
    width: 2px;
    height: 75px;
    height: calc(70% - 24px);
    background: #11c4fb;
  }
  
  .digit .segment:nth-child(7) {
    bottom: 95px;
    bottom: calc(71% - 11px);
    right: 4px;
    left: 4px;
    height: 2px;
    background: #11c4fb;
  }

　　ts代码：

import { Component, OnInit, Input, ViewChild, ViewContainerRef, TemplateRef, ElementRef, QueryList, SimpleChanges } from '@angular/core';

@Component({
  selector: 'app-led-clockfont',
  templateUrl: './led-clockfont.component.html',
  styleUrls: ['./led-clockfont.component.css']
})
export class LedClockfontComponent implements OnInit {
  @ViewChild("container", {read: ViewContainerRef}) container_elem: ViewContainerRef;
  @ViewChild("child_elem") tpl_elem: TemplateRef<any>;
  @ViewChild("point_elem") tpl_point_elem: TemplateRef<any>;
  @Input() fontValue:number = 0;

  //数值模型数组，0,1,2,3,4,5,6,7,8,9
  private digitSegments = [
      [1, 2, 3, 4, 5, 6],
      [2, 3],
      [1, 2, 7, 5, 4],
      [1, 2, 7, 3, 4],
      [6, 7, 2, 3],
      [1, 6, 7, 3, 4],
      [1, 6, 5, 4, 3, 7],
      [1, 2, 3],
      [1, 2, 3, 4, 5, 6, 7],
      [1, 2, 7, 3, 6, 4]
  ]
  constructor(private el:ElementRef) {

   }

  ngOnInit() {

  }


  ngOnChanges(changes: SimpleChanges): void {
    if(parseFloat(this.fontValue.toString())){
      this.createDomContainer();
    }else{
      //Do-nothing
    }
    // this.createDomContainer();
    
  }

  

  createDomContainer(){
    //根据当前数值长度处理DOM容器
    if(0 !== this.fontValue.toString().length){
      //清空容器内视图
      this.container_elem.clear();
      //处理容器内视图
      let view = null;
      let point_index = this.fontValue.toString().indexOf('.');
      for(let i=0;i<this.fontValue.toString().length;i++){
        if((-1 != point_index) && (i == point_index)){
          view = this.tpl_point_elem.createEmbeddedView(null);
          this.container_elem.insert(view);
        }else{
          view = this.tpl_elem.createEmbeddedView(null);
          this.container_elem.insert(view);
        }
      }
      this.typeConversionst();
    }else{
      //Do-nothing
    }
  }

  //截取数字，类型转换
  typeConversionst(){
    let _minutes = this.el.nativeElement.querySelectorAll('.minutes');
    //字符串格式
    let fontValue_string = this.fontValue.toString();
    //转化成number类型，调用设置数值方法，设置数值
    if(0 != _minutes.length){
      for(let i=0;i<_minutes.length;i++){
        this.setNumber(_minutes[i], parseInt(fontValue_string.slice(i,i+1)), 1);
      }
    }
  }

  setNumber(digit, number, on){
    let segments = digit.querySelectorAll('.segment');
    let current = parseInt(digit.getAttribute('data-value'));
    if(!isNaN(number)){
      //处理数字
      this.digitSegments[number].forEach(function(digitSegment, index) {
        setTimeout(function() {
          segments[digitSegment - 1].classList.add('on');
        }, index * 1)
      });
      digit.setAttribute('data-value', number);
    }else{
      //Do-nothing
    }
  }

}

三、使用

　　图一使用：　　

<p *ngIf="selfFontStyle == 'clockStyle' && value != '--'" style="height: 140px;line-height: 120px;text-align: right;font-size: 40px;color: #13b4eb;position: relative;float: right;right: 130px;">
  <app-led-clockfont  [fontValue]="value"  *ngIf="selfFontStyle == 'clockStyle'"></app-led-clockfont>
  <!-- value = 40.72  -->
</p> 

　　图二使用：

<app-led-clockfont [fontValue]="mapComponentConfig.length"></app-led-clockfont>
<!-- mapComponentConfig.length = 397 -->

四、说明

　　利用Angular6创建一个led-clockfont组件，目录结构如下图：

　　　　

　　css代码详见第二步 css代码，html代码详见第二步 html代码，ts代码详见第二步 ts代码。

　　使用部分详见第三步