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:;
     left: 28%;
     width: 100px;
     margin-left: 0px;
     text-align: center;
     z-index:;
     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:;
     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代码。

　　使用部分详见第三步