From cc5a2d04bd2e76fce727287c3de8d690179d1e6f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Yi=C4=9Fit=20FINDIKLI?= Date: Tue, 11 May 2021 16:19:11 +0300 Subject: [PATCH] Fixed #10224 - Dynamic Translation Support --- .../components/confirmdialog/confirmdialog.ts | 13 +++++++++++++ src/app/components/dataview/dataview.ts | 17 +++++++++++++++-- src/app/components/fileupload/fileupload.ts | 18 ++++++++++++++++-- src/app/components/listbox/listbox.ts | 19 +++++++++++++++++-- 4 files changed, 61 insertions(+), 6 deletions(-) diff --git a/src/app/components/confirmdialog/confirmdialog.ts b/src/app/components/confirmdialog/confirmdialog.ts index e6b60415b49..ac2102eb029 100755 --- 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 index 1b156d2e9f3..25a59ae1585 100755 --- 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 index c6d3c989089..6c2f66f1c01 100755 --- 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 index 4f022396d08..9c9349466ca 100755 --- 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({