lamp.ts

import {Directive, ElementRef} from '@angular/core';
@Directive({
  selector: '[lamp]'
})
export class LampDirective {

  move_h = 33;     //移动高度
  scorllStep = 1;
  scrollTime = 60;
  stopTime = 1000;
  tmpH = 0;
  constructor(public el:ElementRef) {
    console.log(el);
    this.lineChange();
  }

  //跑马灯
  lineChange() {
    let child_div = this.el.nativeElement.children;
    setTimeout(() => {
      if (child_div.length > 0) {
        this.start();
      }
    }, 10);
  }

  start() {
    if (this.tmpH < this.move_h) {//  tmpH = 0 ; move_h = 33
      this.tmpH += this.scorllStep;//scorllStep = 1
      if (this.tmpH > this.move_h) {
        this.tmpH = this.move_h;
      }
      this.el.nativeElement.scrollTop = this.tmpH;
      setTimeout(() => {
        this.start()
      }, this.scrollTime);//stopTime = 3000 ; scrollTime = 30 每移动一个单位延时30ms
    } else {
      this.tmpH = 0;
      this.el.nativeElement.appendChild(this.el.nativeElement.children[0]);
      setTimeout(() => {
        this.start()
      }, this.stopTime);//stopTime = 3000 ; scrollTime = 30 每移动一个单位延时30ms
    }
  }

}