Angular2-text-ticker-directive 在 ionic 2 项目中不起作用

Posted

技术标签:

【中文标题】Angular2-text-ticker-directive 在 ionic 2 项目中不起作用【英文标题】:Angular2-text-ticker-directive not working in ionic 2 project 【发布时间】:2018-01-02 18:41:06 【问题描述】:

我正在尝试从 here 实现 Angular2-text-ticker-directiv,但它不起作用。我拿到了div,div是空的,没有滚动文字。

为了测试,我将示例代码添加到我的项目中进行测试。

<ion-avatar item-left>
    <span class="story-username">getUsername()</span>
    <ion-icon name="icon-mapporia-edit" role="img" class="icon icon-ios ion-ios-icon-mapporia-edit story-edit" aria-label="icon mapporia-edit" ng-reflect-name="icon-mapporia-edit"></ion-icon>
    <p class="story-location">story.location</p>
    <div class="tickerContainer myStyles">
        <div ticker [trigger]="'auto'" [text]="'A statically-typed, long string'" [speed]="50" [padding-right]="40" [size]="20"></div>
    </div>
    <p class="story-time">calculatePostedTime()</p>
    <rating [(ngModel)]="story.ratingAvarege" readOnly="true" max="5" emptyStarIconName="star-outline" halfStarIconName="star-half" starIconName="star" nullable="false"></rating>
    <p class="story-subject">story.subject</p>
</ion-avatar>
<li class="thumnail-list" *ngFor="let image of story.images">
    <img-loader [src]="image" [spinner]="true" class="thumnails"  id="story-image">
    </img-loader>
</li>

我在调用我的自定义指令(显示)之前添加了&lt;div id="ghost"&gt;&lt;/div&gt;

<div class="profileDetails">
    <story-summary *ngFor="let story of myStories" [story]="story" (click)="readStory(story)" class="story"></story-summary>   
</div>

我还包含了给定的 css:

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

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

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

如果有经验的人帮我解决这个问题。 谢谢

我发现了一个错误。 请根据给定的方法更正以下方法:

getTextWidth(): number 
        let t = this.r.createElement( document.getElementById('ghost'), 'div' );

        // this.r.setText( t, this.text ); // not working, oddly
        t.innerhtml = this.text; // quick fix

        this.r.setElementStyle( t, 'font-size', this.size + 'px');
        let w = t.offsetWidth;
        t.innerHTML = '';
        return w;
    

【问题讨论】:

【参考方案1】:

我也遇到了和你一样的问题。您提供的链接中的ticker 指令包含一些错误。

老-

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;

较新 -

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 ); // not working, oddly
    self.innerHTML = this.text; // quick fix
    return self;

用新代码替换ticker指令中的旧代码。 希望它有助于解决您的问题。如果是,请将我的答案标记为正确:)

【讨论】:

感谢您的建议@g00glen00b,我已经编辑了我的答案

以上是关于Angular2-text-ticker-directive 在 ionic 2 项目中不起作用的主要内容,如果未能解决你的问题,请参考以下文章