horizonta-lamp.ts

import {Directive, ElementRef} from '@angular/core';

@Directive({
    selector: '[horizonta-lamp]' // Attribute selector
})
export class HorizontaLampDirective {

    move_h = 33;     //移动高度
    scorllStep = 1;
    scrollTime = 60;
    stopTime = 1000;
    tmpH = 0;

    constructor(public el: ElementRef) {
        this.lineChange();
        console.log(this.el)
    }

    //跑马灯
    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
        }
    }

}