Question

我是angular2的新手。我正在尝试为angular2应用程序开发语言切换器。我没有问题地配置ng2-translate，我的语言切换器适用于标签和文本。

现在我想支持i18n作为一个primeng组件p-calendar。

如prime-ng文档中所述：

通过将设置对象绑定到locale属性来定义不同语言和格式的本地化。以下是西班牙日历。

            Type type = pluginDto.plugin.GetType();

            ServiceHost oNewRESTHost = new WebServiceHost(type, new Uri[] { new Uri(sBaseAddress) });
            oNewRESTHost.Credentials.ServiceCertificate.SetCertificate(StoreLocation.LocalMachine, StoreName.My, X509FindType.FindBySerialNumber, ConfigDto.loadConfig(ConfigDto.CERT_SERIAL));

            BackendContext.Current.Log.WriteLine(String.Format("Created new service rest host '{0}'", pluginDto.plugin.Name));

            WebHttpBinding binding = new WebHttpBinding();
            binding.Security.Mode = WebHttpSecurityMode.Transport;
            binding.TransferMode = TransferMode.Streamed;
            binding.MaxReceivedMessageSize = 50000000;

            foreach( Type oServiceInterface in pluginDto.plugin.getRestServiceInterface() )
            {
                String sRestAdress = String.Format("{0}/{1}", sBaseAddress, oServiceInterface.Name);
                ServiceEndpoint oWebEndpoint = oNewRESTHost.AddServiceEndpoint(oServiceInterface, binding, sRestAdress);
                oHosts.Add(oNewRESTHost);

                var behavior = new BackendEndpointWebBehavior()
                {
                    AutomaticFormatSelectionEnabled = false,
                    FaultExceptionEnabled = false,
                    HelpEnabled = false,
                    DefaultOutgoingRequestFormat = System.ServiceModel.Web.WebMessageFormat.Json,
                    DefaultOutgoingResponseFormat = System.ServiceModel.Web.WebMessageFormat.Json,
                    DefaultBodyStyle = System.ServiceModel.Web.WebMessageBodyStyle.Wrapped,
                };
                oWebEndpoint.Behaviors.Add(behavior);
                oNewRESTHost.Open();

                BackendContext.Current.Log.WriteLine(String.Format("Added endpoint '{0}'", sRestAdress));
            }

我的问题是如何绑定一个全局对象，如＆＃34; es＆＃34;在我的应用程序中的任何组件和本地之间切换？以下是我的代码片段：

app.component.ts

<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'],
        };
    }
}

app.component.html

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;
  }
}

如何将p-calendar用于locale =＆＃34; calendar＆＃34;在我的所有组件上，他们听取语言的变化？

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

在[locale]绑定上似乎也有issue，Any Idea如何解决这个问题？

Answer 1

你好，你可以使用这个：

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

PS：这是我找到的唯一方法:)。

Answer 2

解决方案：

<p-calendar [(ngModel)]="currentDate" [minDate]="minDate" [maxDate]="maxDate" [inline]="true"
          [disabledDays]="[0,6]" (onSelect)="selectedDate($event)" [showOnFocus]="true" [locale]="CALENDER_CONFIG_EN" [monthNavigator]='true'
          [selectOtherMonths]='true' [disabled]="noDates" [disabledDates]="disabledPreviousMonth"></p-calendar>

在组件中：

currentDate: Date;
minDate: Date;
maxDate: Date


CALENDER_CONFIG_EN = {
        firstDayOfWeek: 1,
        dayNames: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
        dayNamesShort: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        dayNamesMin: ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'],
        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'],
        today: 'Today',
        clear: 'Clear',
    }

prime-ng p-calendar组件语言切换器

2 个答案: