Angular2-text-ticker-directive在離子2項目中不起作用

Question

我試圖從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" alt="Story Image" id="story-image"> 
    </img-loader> 
</li> 

我加入了<div id="ghost"></div>調用我的自定義指令（露面）面前：

<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; 
    } 

如果有人有經驗的幫我解決這個問題。 thnx

我發現了一個bug。 請修正以下給出的方法：

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; 
    } 

Answer 1

我也遇到了與您相同的問題。您提供的鏈接中的股票指令包含一些錯誤。

Older-

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; 
} 

用新的替換股票的指令舊代碼。 希望它有助於解決您的問題。如果是，那麼請將我的答案標記爲正確:)