sélecteur de langage de composant p-calendar de premier choix

Question

Je suis nouveau sur angular2. J'essaye de développer un sélecteur de langue pour une application angulaire2. J'ai configuré ng2-translate sans problème, mon sélecteur de langue fonctionne bien pour les étiquettes et le texte.

Maintenant, je veux prendre en charge i18n pour un composant primeng p-calendar.

Comme cela est décrit dans la documentation prime-ng:

localisation pour les différentes langues et formats est défini en liant les paramètres objet à la propriété locale. Voici un calendrier espagnol.

<p-calendar [(ngModel)]="dateValue" [locale]="es"></p-calendar> 


export class MyModel { 

    es: any; 

    ngOnInit() { 
     this.es = { 
      //date 
      closeText: "Cerrar", 
      prevText: "<Ant", 
      nextText: "Sig>", 
      currentText: "Hoy", 
      monthNames: [ "enero","febrero","marzo","abril","mayo","junio", 
      "julio","agosto","septiembre","octubre","noviembre","diciembre" ], 
      monthNamesShort: [ "ene","feb","mar","abr","may","jun", 
      "jul","ago","sep","oct","nov","dic" ], 
      dayNames: [ "domingo","lunes","martes","miércoles","jueves","viernes","sábado" ], 
      dayNamesShort: [ "dom","lun","mar","mié","jue","vie","sáb" ], 
      dayNamesMin: [ "D","L","M","X","J","V","S" ], 
      weekHeader: "Sm", 
      dateFormat: "dd/mm/yy", 
      firstDay: 1, 
      isRTL: false, 
      showMonthAfterYear: false, 
      yearSuffix: "" 

      //time 
      timeOnlyTitle: 'Elegir una hora', 
      timeText: 'Hora', 
      hourText: 'Horas', 
      minuteText: 'Minutos', 
      secondText: 'Segundos', 
      millisecText: 'Milisegundos', 
      microsecText: 'Microsegundos', 
      timezoneText: 'Uso horario', 
      timeFormat: 'HH:mm', 
      timeSuffix: '', 
      amNames: ['a.m.', 'AM', 'A'], 
      pmNames: ['p.m.', 'PM', 'P'], 
     }; 
    } 
} 

Ma question est de savoir comment lier un objet global comme « es » sur un composant dans mon application et basculer entre les habitants? Voici un extraits de mon code:

app.component.ts

import {Component, ElementRef, AfterViewInit, OnInit} from '@angular/core'; 
import {TranslateService} from 'ng2-translate/ng2-translate'; 
import {environment} from '../environments/environment'; 
import {SelectItem} from 'primeng/primeng'; 

const SUPPORTED_LANGUAGES:Array<SelectItem> = [ 
    {label: 'English', value: 'en'}, 
    {label: 'French', value: 'fr'}, 
]; 
@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 
export class AppComponent implements OnInit, AfterViewInit { 
    ngOnInit():void { 
    this.calendar_fr = { 
     closeText: "Fermer", 
     prevText: "Précédent", 
     nextText: "Suivant", 
     currentText: "Aujourd'hui", 
     monthNames: [ "janvier", "février", "mars", "avril", "mai", "juin", 
     "juillet", "août", "septembre", "octobre", "novembre", "décembre" ], 
     monthNamesShort: [ "janv.", "févr.", "mars", "avr.", "mai", "juin", 
     "juil.", "août", "sept.", "oct.", "nov.", "déc." ], 
     dayNames: [ "dimanche", "lundi", "mardi", "mercredi", "jeudi", "vendredi", "samedi" ], 
     dayNamesShort: [ "dim.", "lun.", "mar.", "mer.", "jeu.", "ven.", "sam." ], 
     dayNamesMin: [ "D","L","M","M","J","V","S" ], 
     weekHeader: "Sem.", 
     dateFormat: "dd/mm/yy", 
     firstDay: 1, 
     isRTL: false, 
     showMonthAfterYear: false, 
     yearSuffix: "" 
    }; 
    this.calendar_en = { 
     closeText: "Done", 
     prevText: "Prev", 
     nextText: "Next", 
     currentText: "Today", 
     monthNames: [ "January","February","March","April","May","June", 
     "July","August","September","October","November","December" ], 
     monthNamesShort: [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", 
     "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ], 
     dayNames: [ "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" ], 
     dayNamesShort: [ "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat" ], 
     dayNamesMin: [ "Su","Mo","Tu","We","Th","Fr","Sa" ], 
     weekHeader: "Wk", 
     dateFormat: "dd/mm/yy", 
     firstDay: 1, 
     isRTL: false, 
     showMonthAfterYear: false, 
     yearSuffix: "" }; 
    } 
    public supportedLanguages:SelectItem[] = SUPPORTED_LANGUAGES; 

    public calendar: any; 
    public calendar_fr: any; 
    public calendar_en: any; 

    public lang:string; 

    constructor(private el:ElementRef, private translate:TranslateService) { 
    translate.addLangs(["en", "fr"]); 
    translate.setDefaultLang('en'); 
    let browserLang = translate.getBrowserLang(); 
    let defaultLanguage = browserLang.match(/en|fr/) ? browserLang : 'en'; 
    translate.use(defaultLanguage); 
    this.calendar = defaultLanguage == 'fr' ? this.calendar_fr : this.calendar_en; 
    } 


    changeLanguage() { 
    this.translate.use(this.lang); 
    this.calendar = this.lang == 'fr' ? this.calendar_fr : this.calendar_en; 
    } 
} 

app.component.html

... 
<p-dropdown [options]="supportedLanguages" [(ngModel)]="lang" [autoWidth]="false" (onChange)="changeLanguage()"></p-dropdown> 
... 

Comment utiliser p-calendrier avec locale = "calendrier" sur tout mon composant et ils écoutent le changement de langue?

<p-calendar id="calendar" [locale]="calendar"></p-calendar> 

Il semble qu'il y ait un issue trop sur la liaison [locale], toute idée comment résoudre ce problème?

Answer 1

Bonjour, vous pouvez utiliser ceci:

<p-calendar *ngIf="calendar===calendar_fr" [locale]="calendar_fr"></p-calendar> <p-calendar *ngIf="calendar===calendar_en" [locale]="calendar_en"></p-calendar>

PS: C'est la seule façon que je trouve :).