Question

Angular2新闻自动收报机在我的项目中无效。任何人都可以帮我解决代码问题吗？

我在 app.module.ts

中导入 ticker.directive.ts

从'./directives/ticker.directive'导入{TickerDirective};

并加入

@NgModule（{ 声明：[ TickerDirective， ]

<div class="tickerContainer myStyles">


<div ticker [trigger]="'auto'" [text]="'A statically-typed, long string'" [speed]="50" [padding-right]="40" [size]="20"></div>

<div id="ghost"></div>


#ghost{
display: inline-block;
height: 0;
position: absolute;

}

.tickerContainer{
overflow-x: hidden;
overflow-y: scroll;
white-space: nowrap;

}

.myStyles{
background: #eee;   
color: blue;
border: 1px solid #ddd;
max-width: 200px;
cursor: pointer;

}

ticker.directive.ts

import { Directive, ElementRef, HostListener, Input, Renderer, OnInit } from '@angular/core';

@Directive（{selector：'[ticker]'}）导出类TickerDirective实现OnInit {

margin: number; // margin of the text nodes which decrements to tick to the left
interval: any;  // used to kill the setTimout 
firstNode: any; // the node which displays first and without mouseover 
view: any[];    // an array of nodes attached to the main node to provide a seemless scroll
textWidth: number;
idle: boolean;

@Input('speed') speed: number;                  // milliseconds between ticks
@Input('padding-right') paddingRight: number;
@Input('size') size: number;
@Input('trigger') trigger: string;
@Input('text') text: string;

constructor(private el: ElementRef, private r: Renderer) {  }

@HostListener('mouseenter') onMouseEnter(): void  {
    if ( this.trigger === 'onMouseEnter') {
        this.initTicker();
    }
}

@HostListener('click') onClick(): void  {
    if ( this.trigger === 'onClick') {
        if ( this.idle ) {
            this.initTicker();
        } else {
            this.reset();
        }
        this.idle = !this.idle;
    }
}

initTicker(): void {
    if (this.tickerNeeded()) {
        this.margin = 0;

        this.view = [
            this.createTickerNode( '<T>', this.text ),
            this.createTickerNode( '<T>', this.text )
        ];

        this.r.attachViewAfter( this.firstNode, this.view );
        this.moveLeft();
    }
}

@HostListener('mouseleave') onMouseLeave(): void {
    if (this.tickerNeeded() && this.trigger === 'onMouseEnter') {
        this.reset();
    }
}

reset(): void {
    clearInterval( this.interval );
    this.r.detachView( this.view );
    this.r.setElementStyle( this.firstNode, 'margin-left', '0' );
}

ngOnInit(): void {
    this.setIgnoredAtts();
    this.textWidth = this.getTextWidth();
    this.firstNode = this.createTickerNode( this.firstNode, this.text );
    if ( this.trigger === 'auto' && this.tickerNeeded()) {
        this.initTicker();
    }
}

setIgnoredAtts(): void {
    if ( !this.paddingRight ) { this.paddingRight = 16; }
    if ( !this.speed )        { this.speed = 25; }
    if ( !this.trigger )      { this.trigger = 'onMouseEnter'; }
    if ( !this.size )         { this.size = 16; }
    if ( !this.text )         { this.text = 'You need to add the [text] attribute to the "ticker" directive'; }
    this.idle = true;
}

createTickerNode( self: any , text: string ): any {
    self = this.r.createElement( this.el.nativeElement, 'span' );
    this.r.setElementStyle( self, 'padding-right', this.paddingRight + 'px');
    this.r.setElementStyle( self, 'font-size', this.size + 'px');
    this.r.setText( self, text );
    return self;
}

moveLeft(): void {
    let resetMargin = ( this.textWidth + this.paddingRight ) * -2 ;
    this.interval = setInterval(() => {
        this.r.setElementStyle( this.firstNode, 'margin-left', this.margin-- + 'px' );
        if (this.margin < resetMargin) { this.margin = 0; }
    }, this.speed);
}

getTextWidth(): number {
    let t = this.r.createElement( document.getElementById('ghost'), 'div' );
    this.r.setText( t, this.text );
    this.r.setElementStyle( t, 'font-size', this.size + 'px');
    let w = t.offsetWidth;
    t.innerHTML = '';
    return w;
}

tickerNeeded(): boolean {
    return this.textWidth > this.el.nativeElement.parentElement.offsetWidth - 2;
}

}

Answer 1

更改 HTML 代码，如下所示：

<div id="ghost"></div>
<div class="myStyles">
<h3 ticker [trigger]="'auto'" [text]="yourtext" [speed]="50" [padding-right]="40" [size]="25"></h3>
</div>

更改 ticker.directive.ts ，如下所示：

import {Directive,ElementRef,HostListener,Input,Renderer,OnInit} from '@angular/core';
@Directive({
    selector: '[ticker]'
})

export class TickerDirective implements OnInit {
    margin: number; // margin of the text nodes which decrements to tick to the left
    interval: any; // used to kill the setTimout 
    firstNode: any; // the node which displays first and without mouseover 
    view: any[]; // an array of nodes attached to the main node to provide a seemless scroll
    textWidth: number;
    idle: boolean;

@Input('speed') speed: number; // milliseconds between ticks
@Input('padding-right') paddingRight: number;
@Input('size') size: number;
@Input('trigger') trigger: string;
@Input('text') text: string;

constructor(private el: ElementRef, private r: Renderer) {}

@HostListener('mouseenter') onMouseEnter(): void {
    if (this.trigger === 'onMouseEnter') {
        this.initTicker();
    }
}

@HostListener('click') onClick(): void {
    if (this.trigger === 'onClick') {
        if (this.idle) {
            this.initTicker();
        } else {
            this.reset();
        }
        this.idle = !this.idle;
    }
}

initTicker(): void {
    if (this.tickerNeeded()) {
        this.margin = 0;

        this.view = [
            this.createTickerNode('<T>', this.text),
            this.createTickerNode('<T>', this.text)
        ];

        this.r.attachViewAfter(this.firstNode, this.view);
        this.moveLeft();
    }
}

@HostListener('mouseleave') onMouseLeave(): void {
    if (this.tickerNeeded() && this.trigger === 'onMouseEnter') {
        this.reset();
    }
}

reset(): void {
    clearInterval(this.interval);
    this.r.detachView(this.view);
    this.r.setElementStyle(this.firstNode, 'margin-left', '0');
}

ngOnInit(): void {
    this.setIgnoredAtts();
    this.textWidth = this.getTextWidth();
    this.firstNode = this.createTickerNode(this.firstNode, this.text);
    if (this.trigger === 'auto' && this.tickerNeeded()) {
        this.initTicker();
    }
}

setIgnoredAtts(): void {
    if (!this.paddingRight) {
        this.paddingRight = 16;
    }
    if (!this.speed) {
        this.speed = 25;
    }
    if (!this.trigger) {
        this.trigger = 'onMouseEnter';
    }
    if (!this.size) {
        this.size = 16;
    }
    if (!this.text) {
        this.text = 'You need to add the [text] attribute to the "ticker" directive';
    }
    this.idle = true;
}

createTickerNode(self: any, text: string): any {
    self = this.r.createElement(this.el.nativeElement, 'span');
    this.r.setElementStyle(self, 'padding-right', this.paddingRight + 'px');
    this.r.setElementStyle(self, 'font-size', this.size + 'px');
    this.r.setText(self, text);
    return self;
}

moveLeft(): void {
    let resetMargin = (this.textWidth + this.paddingRight) * -2;
    this.interval = setInterval(() => {
        this.r.setElementStyle(this.firstNode, 'margin-left', this.margin-- + 'px');
        if (this.margin < resetMargin) {
            this.margin = 0;
        }
    }, this.speed);
}

getTextWidth(): number {
    let t = this.r.createElement(document.getElementById('ghost'), 'div');
    this.r.setText(t, this.text);
    this.r.setElementStyle(t, 'font-size', this.size + 'px');
    let w = t.offsetWidth;
    t.innerHTML = '';
    return w;
}

tickerNeeded(): boolean {
    return this.textWidth > this.el.nativeElement.parentElement.offsetWidth - 2;
}}

Angular2新闻自动收报机在我的项目中不起作用，为什么？

1 个答案: