2017-04-11 178 views
0

我正在學習如何爲推送器通知實施通知服務。我基本上想跟蹤推送者的通知。目前,我能夠從推杆通道收到推送通知,但是當我點擊它後,它消失/消失。事實上,我想在列表中顯示推送者在我的應用程序中發出的通知,以便我可以跟蹤它們。通知應該列在event.html頁面上。 問題:通知服務如何使用推送功能來實現我上面解釋的內容?Angular 2推送器的通知服務

通知服務

export class NotificationService { 
    private _notifications = new Subject<Notification>(); 

    public noteAdded = this._notifications.asObservable(); 

    public add(notification: Notification) { 
     this._notifications.next(notification); 
} 

商品通知模型

export class Notification{ 
    constructor(
     public type: string = '', 
     public message: string = '') {} 
} 

通知

@Component({ 
    selector: 'notifications', 
    template:` 
    <div class="notifications"> 
     <div (click)="hide(note)" class="{{ note.type }}" 
       *ngFor="let note of _notes"> 
      {{ note.message }} 
     </div> 
    </div> 
    `, 
    providers:[NotificationService] 
}) 

export class NotificationComponent{ 
    private _notes: Notification[]; 

    constructor(private _notifications: NotificationService) { 
     this._notes = new Array<Notification>(); 

     _notifications.noteAdded.subscribe(note => { 
      this._notes.push(note); 
      setTimeout(() => { this.hide.bind(this)(note) }, 3000); 
     }); 
    } 

    private hide(note) { 
     let index = this._notes.indexOf(note); 

     if (index >= 0) { 
      this._notes.splice(index, 1); 
     } 
    } 
} 

event.html

<notifications></notifications> 

event.ts

@Component({ 
    selector: 'pusher', 
    templateUrl: 'event.html', 
    providers:[HttpService, NotificationService] 
}) 
export class pusherComponent{ 
    constructor(private httpService:HttpService, private router:Router, private elementRef:ElementRef, private _notes:NotificationService) {} 

    ngAfterViewInit(){ 
     var s = document.createElement("script"); 
     s.type = "text/javascript"; 
     s.src ="src/app/js/pusher.js"; 
     this.elementRef.nativeElement.appendChild(s); 
    } 
} 
+2

你可以降低你的問題的長度3通過刪除空白;-) –

+0

@GünterZöchbauer,我只是,並希望這是好的;-) – XamarinDevil

+0

我沒有看到任何改變與白色空間相關。 –

回答