Showing
1 changed file
with
38 additions
and
18 deletions
... | ... | @@ -19,7 +19,7 @@ import { |
19 | 19 | Component, |
20 | 20 | Directive, |
21 | 21 | ElementRef, |
22 | - Inject, Input, | |
22 | + Inject, Input, NgZone, | |
23 | 23 | OnDestroy, |
24 | 24 | ViewContainerRef |
25 | 25 | } from '@angular/core'; |
... | ... | @@ -48,40 +48,43 @@ export class ToastDirective implements AfterViewInit, OnDestroy { |
48 | 48 | private hideNotificationSubscription: Subscription = null; |
49 | 49 | |
50 | 50 | private snackBarRef: MatSnackBarRef<TbSnackBarComponent> = null; |
51 | + private currentMessage: NotificationMessage = null; | |
51 | 52 | |
52 | 53 | constructor(public elementRef: ElementRef, |
53 | 54 | public viewContainerRef: ViewContainerRef, |
54 | 55 | private notificationService: NotificationService, |
55 | 56 | public snackBar: MatSnackBar, |
57 | + private ngZone: NgZone, | |
56 | 58 | private breakpointObserver: BreakpointObserver) { |
57 | 59 | } |
58 | 60 | |
59 | 61 | ngAfterViewInit(): void { |
60 | 62 | this.notificationSubscription = this.notificationService.getNotification().subscribe( |
61 | 63 | (notificationMessage) => { |
62 | - if (notificationMessage && notificationMessage.message) { | |
63 | - const target = notificationMessage.target || 'root'; | |
64 | - if (this.toastTarget === target) { | |
65 | - const data = { | |
66 | - parent: this.elementRef, | |
67 | - notification: notificationMessage | |
68 | - }; | |
69 | - const isGtSm = this.breakpointObserver.isMatched(MediaBreakpoints['gt-sm']); | |
70 | - const config: MatSnackBarConfig = { | |
71 | - horizontalPosition: notificationMessage.horizontalPosition || 'left', | |
72 | - verticalPosition: !isGtSm ? 'bottom' : (notificationMessage.verticalPosition || 'top'), | |
73 | - viewContainerRef: this.viewContainerRef, | |
74 | - duration: notificationMessage.duration, | |
75 | - data | |
76 | - }; | |
64 | + if (this.shouldDisplayMessage(notificationMessage)) { | |
65 | + this.currentMessage = notificationMessage; | |
66 | + const data = { | |
67 | + parent: this.elementRef, | |
68 | + notification: notificationMessage | |
69 | + }; | |
70 | + const isGtSm = this.breakpointObserver.isMatched(MediaBreakpoints['gt-sm']); | |
71 | + const config: MatSnackBarConfig = { | |
72 | + horizontalPosition: notificationMessage.horizontalPosition || 'left', | |
73 | + verticalPosition: !isGtSm ? 'bottom' : (notificationMessage.verticalPosition || 'top'), | |
74 | + viewContainerRef: this.viewContainerRef, | |
75 | + duration: notificationMessage.duration, | |
76 | + data | |
77 | + }; | |
78 | + this.ngZone.run(() => { | |
77 | 79 | if (this.snackBarRef) { |
78 | 80 | this.snackBarRef.dismiss(); |
79 | 81 | } |
80 | 82 | this.snackBarRef = this.snackBar.openFromComponent(TbSnackBarComponent, config); |
81 | 83 | this.snackBarRef.afterDismissed().subscribe(() => { |
82 | 84 | this.snackBarRef = null; |
85 | + this.currentMessage = null; | |
83 | 86 | }); |
84 | - } | |
87 | + }); | |
85 | 88 | } |
86 | 89 | } |
87 | 90 | ); |
... | ... | @@ -91,13 +94,30 @@ export class ToastDirective implements AfterViewInit, OnDestroy { |
91 | 94 | if (hideNotification) { |
92 | 95 | const target = hideNotification.target || 'root'; |
93 | 96 | if (this.toastTarget === target) { |
94 | - this.snackBar.dismiss(); | |
97 | + this.ngZone.run(() => { | |
98 | + if (this.snackBarRef) { | |
99 | + this.snackBarRef.dismiss(); | |
100 | + } | |
101 | + }); | |
95 | 102 | } |
96 | 103 | } |
97 | 104 | } |
98 | 105 | ); |
99 | 106 | } |
100 | 107 | |
108 | + private shouldDisplayMessage(notificationMessage: NotificationMessage): boolean { | |
109 | + if (notificationMessage && notificationMessage.message) { | |
110 | + const target = notificationMessage.target || 'root'; | |
111 | + if (this.toastTarget === target) { | |
112 | + if (!this.currentMessage || this.currentMessage.message !== notificationMessage.message | |
113 | + || this.currentMessage.type !== notificationMessage.type) { | |
114 | + return true; | |
115 | + } | |
116 | + } | |
117 | + } | |
118 | + return false; | |
119 | + } | |
120 | + | |
101 | 121 | ngOnDestroy(): void { |
102 | 122 | if (this.notificationSubscription) { |
103 | 123 | this.notificationSubscription.unsubscribe(); | ... | ... |