Суть такова: имею MainComponent
, code
:
import {Component, OnInit, OnDestroy, ViewChild, AfterViewInit} from "@angular/core";
import {WebSocketService} from "../services/websocket.service";
import {ActivatedRoute} from '@angular/router';
import {Subscription} from "rxjs/Rx";
import {User} from "../../client/user.model";
import {NotificationComponent} from "../../notification/components/notification.component";
import {ToasterService, ToasterContainerComponent} from "angular2-toaster/angular2-toaster";
@Component({
selector: 'main',
template: `<toaster-container></toaster-container>
<notification-component></notification-component>
<button (click)="popToast()">pop toast</button>`,
providers: [WebSocketService, ToasterService],
directives: [NotificationComponent, ToasterContainerComponent]
})
export class MainComponent implements OnInit, OnDestroy, AfterViewInit {
@ViewChild(NotificationComponent) private notification: NotificationComponent;
private sub: Subscription;
private user: User;
private toasterService: ToasterService;
constructor(private route: ActivatedRoute,
private ws: WebSocketService,
toasterService: ToasterService) {
this.toasterService = toasterService;
this.user = new User();
}
popToast() {
this.toasterService.pop('success', 'Args Title', 'Args Body');
this.notification.start({
timeout: 50,
type: 'info',
title: 'Test Web Service',
body: 1,
buttonCloseShow: false
});
}
ngOnInit() {}
ngAfterViewInit() {
this.sub = this.route
.params
.subscribe(params => {
this.user.room = params['room'];
this.user.name = params['name'];
this.user.lastname = params['lastname'];
});
this.init();
}
init() {
this.ws = new WebSocketService();
this.ws.run(this.onMessage);
setTimeout(() =>
this.ws.send({
name: this.user.name,
lastname: this.user.lastname,
room: this.user.room,
action: 'client_go_test'
}), 500);
}
ngOnDestroy() {
this.sub.unsubscribe();
}
onMessage(event: MessageEvent) {
let routes: Object = {
'go_test': (response) => {
console.log(response)
},
'client_test_not_found': (response) => {
//this.toasterService.pop('success', 'Args Title', 'Args Body');
console.log(this.notification);
this.notification.start({
type: 'info',
title: 'Test Web Service',
body: response,
buttonCloseShow: false
});
}
};
let data = JSON.parse(event.data);
if (routes.hasOwnProperty(data.action)) {
routes[data.action](data.response);
}
}
}
NotificationComponent
code
import {Component} from "@angular/core";
import {TimerService} from "../services/timer.service";
@Component({
selector: 'notification-component',
template: `<div class="j-toast {{toastConfig.type}}" [ngStyle]="{'opacity': opacity}" (mouseenter)="onEnter()" (mouseleave)="onLeave()">
<div *ngIf="toastConfig.buttonCloseShow" class="toast-close" (click)="close()">X</div>
<div id="toast-progress" class="toast-progress" [ngStyle]="{'width': timerService.getWidth() + '%'}"></div>
<div class="toast-content">
<div class="toast-data">
<div class="toast-title">{{toastConfig.title}}</div>
<div class="toast-body">{{toastConfig.body}}</div>
</div>
<div class="toast-icon"></div>
</div>
</div>`,
providers: [TimerService]
})
export class NotificationComponent {
private opacity: number = 0;
public toastConfig: Object = {};
constructor(public timerService: TimerService) {}
public start(config: Object) {
this.opacity = 1;
this.toastConfig = config;
this.timerService.start(this.toastConfig['timeout']);
}
public close() {
this.opacity = 0;
this.timerService.close();
}
onEnter(): void {
this.timerService.pause();
}
onLeave(): void {
this.timerService.resume();
}
}
когда я вызываю popToast
нажатием на кнопку все toast
работают, а вот если у меня приходит сообщение от сокетов (проблема не в сокетах) и я там вызываю
this.notification.start({
type: 'info',
title: 'Test Web Service',
body: response,
buttonCloseShow: false
});
то получаю TypeError: Cannot read property 'start' of undefined