Fixed #10224 - Dynamic Translation Support

primefaces · May 11, 2021 · cc5a2d0 · cc5a2d0
1 parent e808560
commit cc5a2d0
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 6 deletions.
diff --git a/src/app/components/confirmdialog/confirmdialog.ts b/src/app/components/confirmdialog/confirmdialog.ts
@@ -223,6 +223,8 @@ export class ConfirmDialog implements AfterContentInit,OnInit,OnDestroy {
 
     confirmationOptions: Confirmation;
 
+    translationSubscription: Subscription;
+
     constructor(public el: ElementRef, public renderer: Renderer2, private confirmationService: ConfirmationService, public zone: NgZone, private cd: ChangeDetectorRef, public config: PrimeNGConfig) {
         this.subscription = this.confirmationService.requireConfirmation$.subscribe(confirmation => {
             if (!confirmation) {
@@ -269,6 +271,12 @@ export class ConfirmDialog implements AfterContentInit,OnInit,OnDestroy {
         if (this.breakpoints) {
             this.createStyle();
         }
+
+        this.translationSubscription = this.config.translationObserver.subscribe(() => {
+            if (this.visible) {
+                this.cd.markForCheck();
+            }
+        });
     }
 
     option(name: string) {
@@ -502,6 +510,11 @@ export class ConfirmDialog implements AfterContentInit,OnInit,OnDestroy {
         this.restoreAppend();
         this.onOverlayHide();
         this.subscription.unsubscribe();
+
+        if (this.translationSubscription) {
+            this.translationSubscription.unsubscribe();
+        }
+
         this.destroyStyle();
     }
 

diff --git a/src/app/components/dataview/dataview.ts b/src/app/components/dataview/dataview.ts
@@ -1,9 +1,10 @@
-import {NgModule,Component,ElementRef,OnInit,AfterContentInit,Input,Output,EventEmitter,ContentChild,ContentChildren,QueryList,TemplateRef,OnChanges,SimpleChanges,ChangeDetectionStrategy,ChangeDetectorRef, ViewEncapsulation} from '@angular/core';
+import {NgModule,Component,ElementRef,OnInit,AfterContentInit,Input,Output,EventEmitter,ContentChild,ContentChildren,QueryList,TemplateRef,OnChanges,SimpleChanges,ChangeDetectionStrategy,ChangeDetectorRef, ViewEncapsulation, OnDestroy} from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {ObjectUtils} from 'primeng/utils';
 import {Header,Footer,PrimeTemplate,SharedModule,FilterService, TranslationKeys, PrimeNGConfig} from 'primeng/api';
 import {PaginatorModule} from 'primeng/paginator';
 import {BlockableUI} from 'primeng/api';
+import { Subscription } from 'rxjs';
 
 @Component({
     selector: 'p-dataView',
@@ -51,7 +52,7 @@ import {BlockableUI} from 'primeng/api';
     encapsulation: ViewEncapsulation.None,
     styleUrls: ['./dataview.css']
 })
-export class DataView implements OnInit,AfterContentInit,BlockableUI,OnChanges {
+export class DataView implements OnInit,AfterContentInit,OnDestroy,BlockableUI,OnChanges {
 
     @Input() paginator: boolean;
 
@@ -149,6 +150,8 @@ export class DataView implements OnInit,AfterContentInit,BlockableUI,OnChanges {
 
     _layout: string = 'list';
 
+    translationSubscription: Subscription;
+
     @Input() get layout(): string {
         return this._layout;
     }
@@ -167,6 +170,10 @@ export class DataView implements OnInit,AfterContentInit,BlockableUI,OnChanges {
         if (this.lazy) {
             this.onLazyLoad.emit(this.createLazyLoadMetadata());
         }
+
+        this.translationSubscription = this.config.translationObserver.subscribe(() => {
+            this.cd.markForCheck();
+        });
         this.initialized = true;
     }
 
@@ -352,6 +359,12 @@ export class DataView implements OnInit,AfterContentInit,BlockableUI,OnChanges {
     hasFilter() {
         return this.filterValue && this.filterValue.trim().length > 0;
     }
+
+    ngOnDestroy() {
+        if (this.translationSubscription) {
+            this.translationSubscription.unsubscribe();
+        }
+    }
 }
 
 @Component({

diff --git a/src/app/components/fileupload/fileupload.ts b/src/app/components/fileupload/fileupload.ts
@@ -1,5 +1,5 @@
 import {NgModule,Component,OnDestroy,Input,Output,EventEmitter,TemplateRef,AfterViewInit,AfterContentInit,
-            ContentChildren,QueryList,ViewChild,ElementRef,NgZone,ChangeDetectionStrategy, ViewEncapsulation, ChangeDetectorRef} from '@angular/core';
+            ContentChildren,QueryList,ViewChild,ElementRef,NgZone,ChangeDetectionStrategy, ViewEncapsulation, ChangeDetectorRef, OnInit} from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {DomSanitizer} from '@angular/platform-browser';
 import {ButtonModule} from 'primeng/button';
@@ -11,6 +11,7 @@ import {PrimeTemplate,SharedModule,PrimeNGConfig} from 'primeng/api';
 import {BlockableUI} from 'primeng/api';
 import {RippleModule} from 'primeng/ripple';  
 import {HttpClient, HttpEvent, HttpEventType, HttpHeaders} from "@angular/common/http";
+import {Subscription} from 'rxjs';
 
 @Component({
     selector: 'p-fileUpload',
@@ -67,7 +68,7 @@ import {HttpClient, HttpEvent, HttpEventType, HttpHeaders} from "@angular/common
     encapsulation: ViewEncapsulation.None,
     styleUrls: ['./fileupload.css']
 })
-export class FileUpload implements AfterViewInit,AfterContentInit,OnDestroy,BlockableUI {
+export class FileUpload implements AfterViewInit,AfterContentInit,OnInit,OnDestroy,BlockableUI {
 
     @Input() name: string;
 
@@ -197,6 +198,8 @@ export class FileUpload implements AfterViewInit,AfterContentInit,OnDestroy,Bloc
 
     duplicateIEEvent: boolean;  // flag to recognize duplicate onchange event for file input
 
+    translationSubscription: Subscription;
+
     constructor(private el: ElementRef, public sanitizer: DomSanitizer, public zone: NgZone, private http: HttpClient, public cd: ChangeDetectorRef, public config: PrimeNGConfig){}
 
     ngAfterContentInit() {
@@ -221,6 +224,13 @@ export class FileUpload implements AfterViewInit,AfterContentInit,OnDestroy,Bloc
         });
     }
 
+
+    ngOnInit() {
+        this.translationSubscription = this.config.translationObserver.subscribe(() => {
+            this.cd.markForCheck();
+        });
+    }
+
     ngAfterViewInit() {
         if (this.mode === 'advanced') {
             this.zone.runOutsideAngular(() => {
@@ -557,6 +567,10 @@ export class FileUpload implements AfterViewInit,AfterContentInit,OnDestroy,Bloc
         if (this.content && this.content.nativeElement) {
             this.content.nativeElement.removeEventListener('dragover', this.onDragOver);
         }
+
+        if (this.translationSubscription) {
+            this.translationSubscription.unsubscribe();
+        }
     }
 }
 

diff --git a/src/app/components/listbox/listbox.ts b/src/app/components/listbox/listbox.ts
@@ -1,10 +1,11 @@
-import { NgModule, Component, ElementRef, Input, Output, EventEmitter, AfterContentInit, ContentChildren, ContentChild, QueryList, TemplateRef,forwardRef, ChangeDetectorRef, ViewChild, ChangeDetectionStrategy, ViewEncapsulation } from '@angular/core';
+import { NgModule, Component, ElementRef, Input, Output, EventEmitter, AfterContentInit, ContentChildren, ContentChild, QueryList, TemplateRef,forwardRef, ChangeDetectorRef, ViewChild, ChangeDetectionStrategy, ViewEncapsulation, OnInit, OnDestroy } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { SharedModule, PrimeTemplate, Footer, Header, FilterService, TranslationKeys, PrimeNGConfig } from 'primeng/api';
 import { DomHandler } from 'primeng/dom';
 import { ObjectUtils } from 'primeng/utils';
 import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';
 import { RippleModule } from 'primeng/ripple';  
+import { Subscription } from 'rxjs';
 
 export const LISTBOX_VALUE_ACCESSOR: any = {
     provide: NG_VALUE_ACCESSOR,
@@ -86,7 +87,7 @@ export const LISTBOX_VALUE_ACCESSOR: any = {
     encapsulation: ViewEncapsulation.None,
     styleUrls: ['./listbox.css']
 })
-export class Listbox implements AfterContentInit, ControlValueAccessor {
+export class Listbox implements AfterContentInit, OnInit, ControlValueAccessor, OnDestroy {
 
     @Input() multiple: boolean;
 
@@ -182,6 +183,8 @@ export class Listbox implements AfterContentInit, ControlValueAccessor {
 
     public headerCheckboxFocus: boolean;
 
+    translationSubscription: Subscription;
+
     constructor(public el: ElementRef, public cd: ChangeDetectorRef, public filterService: FilterService, public config: PrimeNGConfig) { }
 
     @Input() get options(): any[] {
@@ -204,6 +207,12 @@ export class Listbox implements AfterContentInit, ControlValueAccessor {
         this.activateFilter();
     }
 
+    ngOnInit() {
+        this.translationSubscription = this.config.translationObserver.subscribe(() => {
+            this.cd.markForCheck();
+        });
+    }
+
     ngAfterContentInit() {
         this.templates.forEach((item) => {
             switch (item.getType()) {
@@ -697,6 +706,12 @@ export class Listbox implements AfterContentInit, ControlValueAccessor {
     onHeaderCheckboxBlur() {
         this.headerCheckboxFocus = false;
     }
+
+    ngOnDestroy() {
+        if (this.translationSubscription) {
+            this.translationSubscription.unsubscribe();
+        }
+    }
 }
 
 @NgModule({