Angular: i18n: قادر على استخدام سلاسل الترجمة خارج القالب

أعتقد أن هذه أداة عرض حقيقية ، i18n ليست جاهزة للاستخدام حتى يتم تنفيذ ذلك.
على سبيل المثال ، لا يمكنني تعيين رسائل التحقق المترجمة في التعليمات البرمجية

@ Mattes83 هل جربت بهذه الطريقة؟

<p [hidden]="!alertManagerRowForm.controls.sendTo.hasError('validateEmail')" class="help-error">
    {{ 'ALERTMANAGER__FORM__FIELD__sendTo__ERROR__validateEmail' | translate }}
</p>

: confused: تخبرك الوثائق كم هو جميل وجود رسائل خطأ في التعليمات البرمجية ويتطلب دعم الترجمة أي شيء في القالب. يبدو أن هناك حاجة أكبر للتواصل.

marcalj أعرف بهذه الطريقة ... لكني أحتاج إلى سلاسل مترجمة في ملفات ts الخاصة بي.
manklu أتفق تماما

أعتقد أن هذه أداة عرض حقيقية ، i18n ليست جاهزة للاستخدام حتى يتم تنفيذ ذلك.
على سبيل المثال ، لا يمكنني تعيين رسائل التحقق المترجمة في التعليمات البرمجية

نعم نفس الشيء هنا ، لقد قمت للتو بالتبديل من ng2-translate إلى Angular2 i18n لأنني أفضل استخدام وحدات OOTB ، ومن الأسهل كثيرًا استخراج الترجمات (ng2-translate تستغرق وقتًا أطول في IMO)
في هذه المرحلة لا يمكنني ترجمة رسائل الخطأ التي تظهر من خدماتي. لا يوجد حل أيضا.

إذا أراد شخص ما بدء مواصفات التصميم ، فسيكون ذلك مفيدًا (على سبيل المثال في محرر مستندات Google).

سوف تحتاج إلى سرد جميع الحالات. بسرعة التفكير في الأمر ، أرى حاجة لذلك

_.('static text');
_.('with {{ parameter }}', {parameter: "parameter" });
_.plural(count, {'few': '...'});
_.select(on, {'value': '...'});

مرحبًا يا شباب ، طلب ميزة رائعة: +1:

هل هناك أي حل بديل مقترح لترجمة نصوص * .ts؟

fbobbio ما كنت أفعله هو إنشاء عناصر مخفية في القالب ، على سبيل المثال.
<span class="translation" #trans-foo i18n>foo</span> .

اربطهم باستخدام:
@ViewChild('trans-foo) transFoo : ElementRef; .

ثم استرجاع القيمة المترجمة
transFoo.nativeElement.textContent .

تبدو متخلفة ولكنها تعمل من أجل احتياجاتي.

نظرًا لأن ng-xi18n يعالج بالفعل رمز TS بالكامل ، فلماذا لا تقوم بتطبيق مصمم مثل @i18n() لخصائص (سلسلة-)؟ يمكن بعد ذلك ملؤها بالقيمة المترجمة ، مثل استخدام @Input() مع ربط البيانات أحادي الاتجاه.
إذا لم يكن من السهل استخلاص القيمة غير المترجمة من الكود ، فضعها في الوسيطة كما يلي:

@i18n( {
  source : 'Untranslated value',
  description: 'Some details for the translator'
} )
public set translatedProperty( value : string ) {
   this._translatedProperty = value;
}

وإدخال المصدر في الممتلكات في حالة عدم وجود هدف للترجمة.

هذا عنصر أساسي في دورة التدويل بأكملها ، المنظمة البحرية الدولية.

في متجري ، اعتدنا على أداة "ng-xi18n - like" (امتداد لـ xgettext) التي تزحف إلى جميع أنواع الملفات المصدر بحثًا عن نص محدد لوضعه في ملفات القاموس للمترجمين.

أنا أحب ترميز i18n النظيف والسهل في قوالب HTML ، وكنت أتوقع نفس الشيء بالنسبة إلى رمز Typescript.

vicb بالإضافة إلى حالات الاستخدام الخاصة بك ، أفكر في إمكانية دعم توطين سلسلة محرف في كود TS. ومع ذلك فمن المحتمل أن تكون هناك حاجة لإعادة كتابة رمز TS لدعم مثل هذا السيناريو. هل سيكون نهجا صحيحا؟

هذه هي الميزة الأساسية التي تمنعنا من استخدام النهج الجاهز في ترجمة عروض Angular 2. لدينا العديد من المكونات التي تعتمد على البيانات الوصفية والتي تأتي مفاتيحها من بعض البيانات الوصفية غير المخزنة في HTML. إذا تمكنا من الترجمة عبر الأنبوب أو برمجيًا مقابل الترجمات المتاحة ، فيمكننا الحصول على هذه المكونات لإظهار السلاسل الصحيحة.

في غضون ذلك ، نحن مقيدون بشيء مثل ng-translate بسبب هذا القيد.

الطريقة التي عملت بها لحل هذه المشكلة هي عن طريق إضافة كائن "lang" فارغ في خدمة مستخدمة في جميع أنحاء التطبيق الخاص بي. ثم أقوم بتطبيق أمر يقرأ كل الامتدادات في div وتخزين القيمة في هذا الكائن. أضع كل خيطي في قالب أسفل الصفحة بخاصية مخفية. يمكن بعد ذلك الوصول إلى السلسلة من القالب أو المكون. إنه أمر قبيح ويمكنك بسهولة الكتابة فوق إدخال بنفس المعرف. لكنها أفضل من لا شيء.

الخدمات

@Injectable()
export class AppService {

    //Language string object.
    private _lang:Object = new Object();
    get lang():Object {
        return this._lang;
    }
}

التوجيه

@Directive({
    selector: '[lang]'
})
export class LangDirective implements OnInit {

    constructor(
        public element: ElementRef,
        public app: AppService) {
    }

    ngOnInit() {
        let ele = this.element.nativeElement;
        for (var i = 0; i < ele.children.length; i++) {
            let id = ele.children[i].getAttribute('id');
            let value = ele.children[i].innerHTML;
            this.app.lang[id]=value;
        }
    }
}

قالب

<button>{{app.lang.myButtonText}}</button>
<div lang hidden >
    <span id="myButtonText" i18n="Test Button">Testing</span>
</div>

مرحبا lvlbmeunier

شكرًا لك على تقديم هذا الاقتراح لحل بديل أثناء انتظار التنفيذ الرسمي. حاولت تطبيق الحل الخاص بك ولكن لا يمكنني التعرف على مفاتيح الترجمة الديناميكية. كنت أحاول القيام بذلك على النحو التالي:

<p *ngFor="let d of dataEntry">{{app.lang[d.name]}}</p>
<div lang hidden >
<span id="{{d.name}}" *ngFor="let d of dataEntry" i18n>{{d.name}}</span>
</div>

هذه المفاتيح الجديدة لا تظهر في ملفات xliff الخاصة بي. هل من الممكن تحقيق ذلك مع الحل الخاص بك؟

لم أحاول ذلك مطلقًا ، لكنني على يقين تقريبًا من أن إنشاء ملف xliff لا يقوم بتشغيل التعليمات البرمجية. وجود قيمة ديناميكية في i18n سيكون مخالفًا لهذا المفهوم. إذا كنت تعرف على وجه اليقين جميع الأسماء الموجودة في قائمتك ، فيجب الإعلان عنها جميعًا بشكل مستقل وليس في حلقة for.

تعمل إضافة المفاتيح يدويًا ولكنها غير عملية. في حالتي ، أحصل على مئات من المفاتيح النصية التي تحتاج إلى ترجمة من واجهة برمجة التطبيقات.

يمكنك تشغيل التعليمات البرمجية الخاصة بك وأخذ المصدر ونسخه إلى ملف. يعتمد إنشاء ملف x18n على ملف ثابت.

باستخدام 4.0.0-beta يمكنك تعيين معرف لـ i18n ، على سبيل المثال mainTitle:

<span i18n="title@@mainTitle">

مع هذا يمكننا ، على الأقل لمجمع JIT ، إنشاء مكون وهمي (لا يحتاج إلى إضافته إلى html التطبيق ، فقط وحدة التطبيق) مع جميع ترجماتنا "الإضافية".

بالنسبة للمبتدئين ، سنضيف الموفرين ليس فقط إلى المترجم ولكن إلى وحدة التطبيق أيضًا:

// bootstrap.ts
getTranslationProviders().then(providers => {
    const options = { providers };
    // here we pass "options.providers" to "platformBrowserDynamic" as extra providers.
    // otherwise when we inject the token TRANSLATIONS it will be empty. The second argument of
   // "bootstrapModule" will assign the providers to the compiler and not our AppModule
    platformBrowserDynamic(<Provider[]>options.providers).bootstrapModule(AppModule, options);
});

ثم سننشئ مكونًا وهميًا لإيواء ترجماتنا الإضافية ، لا تنس إضافة المكون إلى declarations من AppModule . هذا حتى يتمكن ng-xi18n من العثور على html (على ما أعتقد) وإضافته إلى ملف الترجمة.

//tmpI18N.ts
import {Component} from '@angular/core';

@Component({
    selector: 'tmpI18NComponent',
    moduleId: module.id,
    templateUrl: 'tmp.i18n.html'
})
export class TmpI18NComponent {
}

أضف ترجماتنا إلى tmp.i18n.html :

<!-- tmp.i18n.html -->
<span i18n="test@@mainTitle">
    test {{something}}
</span>

يمكننا الآن إنشاء خدمة يمكننا من خلالها جلب ترجماتنا:

import {Injectable, Inject, TRANSLATIONS} from '@angular/core';
import {I18NHtmlParser, HtmlParser, Xliff} from '@angular/compiler';

@Injectable()
export class I18NService {
    private _source: string;
    private _translations: {[name: string]: any};

    constructor(
        @Inject(TRANSLATIONS) source: string
    ) {
        let xliff = new Xliff();
        this._source = source;
        this._translations = xliff.load(this._source, '');
    }

    get(key: string, interpolation: any[] = []) {
        let parser = new I18NHtmlParser(new HtmlParser(), this._source);
        let placeholders = this._getPlaceholders(this._translations[key]);
        let parseTree = parser.parse(`<div i18n="@@${key}">content ${this._wrapPlaceholders(placeholders).join(' ')}</div>`, 'someI18NUrl');

        return this._interpolate(parseTree.rootNodes[0]['children'][0].value, this._interpolationWithName(placeholders, interpolation));
    }

    private _getPlaceholders(nodes: any[]): string[] {
        return nodes
            .filter((node) => node.hasOwnProperty('name'))
            .map((node) => `${node.name}`);
    }

    private _wrapPlaceholders(placeholders: string[]): string[] {
        return placeholders
            .map((node) => `{{${node}}}`);
    }

    private _interpolationWithName(placeholders: string[], interpolation: any[]): {[name: string]: any} {
        let asObj = {};

        placeholders.forEach((name, index) => {
            asObj[name] = interpolation[index];
        });

        return asObj;
    }

    private _interpolate(pattern: string, interpolation: {[name: string]: any}) {
        let compiled = '';
        compiled += pattern.replace(/{{(\w+)}}/g, function (match, key) {
            if (interpolation[key] && typeof interpolation[key] === 'string') {
                match = match.replace(`{{${key}}}`, interpolation[key]);
            }
            return match;
        });

        return compiled;
    }
}

الآن يمكننا القيام بشيء مثل:

export class AppComponent {

    constructor(i18nService: I18NService) {
        // Here we pass value that should be interpolated in our tmp template as a array and 
        // not an object. This is due to the fact that interpolation in the translation files (xlf for instance)
        // are not named. They will have names such as `<x id="INTERPOLATION"/>
        // <x id="INTERPOLATION_1"/>`. And so on.
        console.log(i18nService.get('mainTitle', ['magic']));
    }
}

هذا حل بديل. ولكن على الأقل يمكننا الاستفادة من ملف الترجمة ، والحصول على المفتاح ، والاقحام وليس من الضروري أن يكون لدينا html مخفي في تطبيقنا.

ملاحظة: حزمة @angular/compiler-cli NPM الحالية 4.0.0 بيتا لها إصدار تبعية غير صحيح من @angular/tsc-wrapped . يشير إلى 0.4.2 يجب أن يكون 0.5.0. vicb هل هذا ثابت بسهولة؟ أم يجب أن ننتظر الإصدار القادم؟

تضمين التغريدة وماذا عن AOT؟

ghidoz AOT قصة أخرى. ما نود فعله هو إجراء ترجمة مسبقة لجميع الترجمات حتى نتمكن من الحصول عليها بالمفتاح. ولكن نظرًا لأن ngc سيستبدل كل i18n بالترجمة الصحيحة ، فلا يمكننا الاستفادة منها. لا يمكن العثور على أي خيارات / خصائص مكشوفة تحتوي على الترجمات المحللة من ngc . يمكننا استخدام نفس الأسلوب الديناميكي المتبع في JIT من خلال جلب ملف xlt بهذه الطريقة لا يزال يوفره على الرمز المميز TRANSLATION . ومع ذلك فإن هذا يتعارض مع الغرض من AOT.

لا تفعل ذلك مع أي تطبيقات إنتاج .

/// bootstrap.aot.ts
function fetchLocale() {
    const locale = 'sv';
    const noProviders: Object[] = [];

    const translationFile = `./assets/locale/messages.${locale}.xlf`;
    return window['fetch'](translationFile)
        .then(resp => resp.text())
        .then( (translations: string ) => [
            { provide: TRANSLATIONS, useValue: translations },
            { provide: TRANSLATIONS_FORMAT, useValue: 'xlf' },
            { provide: LOCALE_ID, useValue: locale }
        ])
        .catch(() => noProviders);
}

fetchLocale().then(providers => {
    const options = { providers };
    platformBrowser(<Provider[]>options.providers).bootstrapModuleFactory(AppModuleNgFactory);
});

التفكير الحالي حول كيفية تنفيذ ذلك:

@Component()
class MyComp {
  // description, meaning and id are constants
  monday = __('Monday', {description?, meaning?, id?});
}

• نظرًا لأننا لم نتمكن من التأثير على بنية DOM بمثل هذه البنية ، فيمكننا دعم ترجمات وقت التشغيل - سيكون هناك إصدار واحد من البرنامج الثنائي وسيحدث الحل في وقت التشغيل ،
• يمكننا أيضًا دعم الترجمات الثابتة كما نفعل اليوم للقوالب - سيتم استبدال السلاسل في وقت الترجمة ، وتحسين الأداء ولكن إصدار واحد من التطبيق لكل لغة ،
• ربما يمكننا دعم قوالب __(...) في وقت لاحق ،
• سيتم تنفيذ ذلك عبر محول TS المتاح من 2.3 - ربما يكون لدينا نموذج أولي من قبل.

/ ccocombe

أفترض أن __() مخصص لطريقة ليس لها اسم حتى الآن (ولن تكون الطريقة حقًا __ ، أليس كذلك؟)

إنها فكرة جيدة للترجمات الثابتة التي قد تستخدمها في فصولك الدراسية ، وأعتقد أنها سهلة التنفيذ.

لا __() هو الاسم ، ألا يعجبك :)

يتم استخدامه بشكل شائع في أطر الترجمة - ولكن ستتمكن من الحصول على import {__ as olivier} from '@angular/core' إذا كنت تفضل اسمًا آخر!

eeeeeeh لا تشرح نفسها بنفسها: د
تبدو وكأنها وظيفة خاصة للغاية

لا أحب ___ اسم الطريقة أيضًا :) كنت أتخيل أنها ستكون خدمة؟
في كلتا الحالتين ، من الجيد رؤية التقدم 👍

انا يعجبني __()! : D جدا gettext-y وهو قصير.

في عالم JS ، لدي خبرة فقط مع ocombes ng2-translate ، حيث يؤدي تمييز كل النص باستخدام this._translateService.instant () إلى صعوبة قراءة الكود إلى حد ما مقارنةً ببديل أقصر ، كما هو مقترح هنا.

لا شيء يمنعك من إعادة تسمية خدمة الترجمة ng2 __ كما تعلم :)

في الواقع ، ليس لدي أي فكرة عن كيفية التفاف طريقة خدمة DI في وظيفة بسيطة - على أي حال ، لا تهتم ، هذا خارج نطاق هذه المشكلة :-) كان تعليقي مجرد +1 لاستخدام __ كما هو معروف جيدًا إذا كنت ' سبق أن استخدمت أطر ترجمة أخرى ، على الأقل في عالم PHP.

حسنًا ، ربما ___ جيد ، أفضل من "this.translationService.getTranslation ()" ، أقصر بكثير.
ونعم يمكنك إعادة تسميته إذا أردت.

ماذا عن i18n(...) بدلاً من __(...) ؟

من فضلك توقف عن الجدل حول الاسم ، هذا ليس بيت القصيد. شكرا.

vicb بـ monday = __('Monday', {description: 'First day of the week', id: 'firstDatOfWeek'}); هل من الممكن حلها بالمعرف ، على سبيل المثال:

__('@<strong i="8">@firstDatOfWeek</strong>') // Monday

هل سيكون Monday أيضًا محليًا بالنسبة للفصل الذي تم تحديده أم أنه من الممكن حله من أي مكان؟ أفكر في الترجمات الشائعة مثل "إغلاق" و "فتح" وما إلى ذلك.

كنت أتساءل ما هو أفضل حل بديل حاليًا الذي توصي به يا رفاق لاستخدامه مع AOT حتى يدعمه الإصدار الرسمي؟

يعتبر،
شون

الزاوي 2 حوض المطبخ: http://ng2.javascriptninja.io
والمصدر @ https://github.com/born2net/Angular-kitchen-sink

vicb أي أخبار ، هناك ^

حتى يتم تنفيذ هذه الميزة ، أستخدم ميزة ترجمة السمة .

import {Component, Input, OnInit} from '@angular/core';

@Component({
    selector: 'app-sandbox',
    templateUrl: 'sandbox.html'
})
export class SandboxComponent implements OnInit {
    @Input()
    public title: string;

    constructor() {
    }

    ngOnInit() {
        console.log('Translated title ', this.title);
    }
}

من قالب المكون الأصلي:

<app-sandbox i18n-title title="Sandbox"></app-sandbox>

إنه حل بديل ، لكن مع ذلك ، أعتقد أنه أنظف حل حتى الآن. يتيح لك الوصول إلى الترجمة title ضمن ts .

لقد بدأت العمل على هذه الميزة ، وتوقع مستند تصميم قريبًا :-)

ستكون هذه الميزة الأكثر توقعًا

هذا هو الخبر السار. شكرا لك ocombe .

مستند التصميم متاح هنا: https://goo.gl/jQ6tQf
هو موضع تقدير أي ردود فعل ، شكرا.

حلوة ، سوف تقرأ في اسرع وقت ممكن!

شكرا لكocombe

لقد قرأت الوثيقة. ملخص جميل.

أن تكون قادرًا على استخراج سلسلة من ملفات ts تبدو رائعة.

لست متأكدًا من موعد توفر ترقية Typescript لـ Angular4.

هذا يعني أن هذه الميزة يجب أن تكون متاحة بالفعل لأشهر لأن الجميع واجهوا هذا القيد إلى حد كبير لن يتمكنوا من استخدام هذا الحل قبل 3/6 أشهر أخرى على الأقل.

قد لا أكون الوحيد في الوقت الحالي الذي يستخدم ngx-translate لإدارة الترجمات في وحدات التحكم الخاصة بي بينما أعتمد على الزاوية i18n للقوالب.

من الواضح أن الهدف المتمثل في دمج كل شيء في i18n رائع.

ولكن بصرف النظر عن التبسيط من حيث فهم كيفية تنفيذ i18n في الإطار الزاوي ، فهل سيؤدي هذا النهج حقًا إلى تعزيز الأداء مقارنةً بتطبيق ترجمة ngx الحالي؟

من وجهة نظري الآن ، فإن المكافأة الوحيدة هي أن تكون قادرًا على استخراج سلاسل من وحدات التحكم.

هناك قيد كبير الآن وهو التعددية ، يرجى التأكد من أنه يعمل بشكل صحيح عند إصدار الترقية بالكامل. لقد قرأت الكثير من التذاكر ذات الصلة بـ i18n حيث لا يتعامل كل من xliff و xmb مع هذا بشكل صحيح. هذه حالة أخرى أحتاج فيها إلى الرجوع إلى ترجمة ngx لتقديم حل عملي.

ocombe شكرًا لك على مستند التصميم التفصيلي ، يبدو هذا حلاً جيدًا لطلب الميزة هذا. يعالج التصميم الحالي حالات الاستخدام التي أحاول حلها.

سؤال واحد: يتحدث التصميم عن خدمة I18N لوضع JIT ومحول TS 2.2.x لوضع AOT. هل أنا محق في افتراض أن المحول سيحل محل استدعاء طريقة الخدمة بترجمة ثابتة ، وكذلك إزالة جميع المراجع المتبقية لخدمة I18N؟

سيستخدم Thommas Angular 4 TypeScript 2.1 (مما يعني أنه سيتعين عليك الترقية) ، ولكن يمكنك بالفعل استخدام أي إصدار أحدث من TypeScript (2.2.1 على سبيل المثال) مع Angular 2 أو 4.

من حيث زيادة الأداء على ngx-translate ، يعتمد الأمر على ما إذا كنت تستخدم AOT أم لا. إذا كنت تستخدم AOT ، فهذا مكسب ، لكن ربما لن ترى الفرق. في JIT (بدون AOT) لن يكون هناك أي ربح (في الواقع يعتمد الأمر على ما إذا كنت تستخدم طريقة get التي يمكن ملاحظتها أو طريقة instant المتزامنة ، فإن التكلفة التي يمكن ملاحظتها أكثر من مجرد استدعاء دالة).
أنا أتحدث عن i18n في التعليمات البرمجية الخاصة بك هنا. إذا كنا نتحدث عن القوالب ، فهناك مكسب حقيقي مرئي إذا كنت تستخدم Angular i18n (في AOT و JIT) لأنها لا تستخدم روابط. كلما زاد استخدامك للترجمات ، زادت ربحك.

سأتأكد من أن التعددية تعمل بنفس الطريقة التي تعمل بها مع القوالب. هل هناك أي مشكلة في الوقت الحالي في القوالب؟

schmuli الوقت الوحيد الذي يمكن أن يحل فيه Angular محل الكود الخاص بك هو عندما تستخدم AOT. إذا لم تقم بذلك ، فستظل مكالمات الخدمة كما هي في الرمز الخاص بك.
ولكن إذا كنت تستخدم AOT ، فسيتم استبدال مكالمة الخدمة بترجمة ثابتة (فقط المتغيرات التي قد تستخدمها ستظل ديناميكية). لست متأكدًا مما إذا كنا سنزيل الإشارات إلى خدمة I18n ، لأنه يمكن استخدامها لأشياء أخرى في المستقبل ، وسأضطر لمعرفة ما هو ممكن مع المحول بمجرد أن أبدأ في كتابة الكود. هل تفكر في حالة استخدام حيث ستكون هذه مشكلة؟

ocombe لا أستطيع التفكير في حالة استخدام حيث سيكون ترك الكود مشكلة ، إلا إذا اعتبرنا حقنة DI إضافية لن يتم استخدامها (هل هذه مشكلة حقيقية؟).

بالنظر إلى ما كتبته حول إمكانية استخدام الخدمة لأشياء أخرى في المستقبل ، وإمكانية حدوث أخطاء من خلال تغيير رمز المستخدم ، أود أن أقول إنه ربما يكون من الأفضل تجنب إزالة الكود تمامًا.

ربما يكون من المفيد استخدام الخدمة للحصول على الإعدادات المحلية الحالية في AOT. ضع في اعتبارك على سبيل المثال الحالة التي يكون لديك فيها خادم يمكنه إرجاع نص بعدة لغات ، وبالتالي ستحتاج إلى الإعدادات المحلية الحالية لتضمينها في الطلب. ومع ذلك ، يمكنك دائمًا استخدام سلسلة وهمية مترجمة كحل بديل.

@ diego0020 يمكنك بالفعل الحصول على اللغة ، فقط قم بحقن LOCALE_ID من النواة

لم يتم تنفيذ ocombe Pluralization مع xliff ولا يوجد لدى أي شخص خارج Google أي فكرة عن كيفية استخدامه مع xmb أيضًا. انظر أيضًا: https://github.com/angular/angular/issues/13780

على أي حال ، ليس هناك ما يمنع تطبيق i18n الخاص بنا الآن ، فإن ngx-translate مع أنبوب الجمع سيفي بالغرض في الوقت الحالي. نأمل أن يبدو كل شيء أفضل في NG4 وأن تعكس الوثائق التحسينات. شكرا.

سيتم إصلاح Thommas ICU مع xliff قريبًا: https://github.com/angular/angular/pull/15068 وإذا كنت تريد معرفة كيفية الاستخدام ، فهو موجود في المستندات: https://angular.io/docs/ ts / latest / cookbook / i18n.html #! #عدد العناصر في المجموعة

من فضلك اعتذر ، هل هناك أي وقت مقدر؟ لقد سمعت أنه سيكون متاحًا في إصدار ng4.0.0 ولكن لا! شكرا

نسخة ocombe

ما زلنا نعمل على التصميم ، وهناك الكثير من الأشياء غير المتوقعة التي يجب أخذها في الاعتبار (مثل كيف يمكن للمكتبات إرسال ترجماتها الخاصة) ، ...
توقع هذا لمدة 4.2 ، لكنه ليس مضمونًا.

حسنًا ، شكرًا ocombe ، لدي سؤالان من فضلك:

1. في الواقع ، يمكننا ترجمة نص في قالب يتضمن الاستيفاء ، مثل:
   <span i18n>This is {{myValue}}</span>

1. أسأل لأنني في الواقع لا أستطيع الاستخراج ، لا أعرف لماذا أتلقى هذا الخطأ:
   Could not mark an element as translatable inside a translatable section

istiti

1. نعم تستطيع.
2. تحتاج إلى الانتباه إلى موقع توجيه i18n الخاص بك ، يجب وضعه مباشرة على العنصر الذي يحتوي على النص ، وليس على أي أشقاء آخرين.
   علي سبيل المثال:
   <div i18n><span i18n>my text</span></div> - هذا ليس جيدًا
   <div><span i18n>my text</span></div> - هذا جيد

تضمين التغريدة
شكرا

1. طيب كيف تترجم مع الاستيفاء؟
2. عند استخراج ngc ، أحضر لي ملفًا وسطرًا ومقتطفًا من التعليمات البرمجية ، لكنني لا أمتلك i18n ملفوفًا داخل i18n آخر
   من الصعب حقًا العثور على أي من والدي لديه سمة i18n عن طريق الخطأ

istiti

1. تفعل ذلك مثل أي عنصر آخر ، فقط أضف التوجيه i18n كما فعلت:
   <span i18n>This is {{myValue}}</span>
   ستكون النتيجة في ملف messages.xlf:
   <source>This is <x id="INTERPOLATION"/></source>
   الآن عندما تترجمه إلى لغات مختلفة ، يجب أن تضع <x id="INTERPOLATION"/> في المكان الصحيح في الجملة ، لمساعدة الآخرين على فهم المعنى الخاص بك ، يمكنك إضافة وصف إلى التوجيه i18n مثل هذا:

1. من واقع خبرتي ، الخطأ Could not mark an element as translatable inside a translatable section كما أوضحت ، أتذكر أنه إذا قرأت الخطأ بعناية يمكنني ملاحظة الملف الذي أواجه فيه المشكلة.

fredrikredflag شكرا جزيلا!

الكود الخاص بك مفيد للغاية! اضطررت للتو إلى إصلاح مشكلة واحدة لأنه يبدو أن xliff.load يُرجع كائنًا مختلفًا في الوقت الحاضر ، لذلك يجب تعديل this._translations من أجل:

const loaded = xliff.load(this._source, '');
this._translations = loaded['i18nNodesByMsgId'] ? loaded['i18nNodesByMsgId'] : {};

والتحقق من صحة ثانوي في طريقة get إذا طلبنا مفتاحًا غير موجود:

const placeholders = this._getPlaceholders(this._translations[key] ? this._translations[key] : []);

أيضًا ، أعتقد أن مكون i18n الفارغ قد تم اهتزازه على شكل شجرة أو شيء من هذا القبيل ، لذلك كان عليّ تضمين السلاسل الموجودة في قوالب المكونات المقابلة مع:

<span hidden i18n="@@MY_STRING_1">String 1</span>
<span hidden i18n="@@MY_STRING_2">String 2</span>

لحسن الحظ ، أحتاج فقط إلى عدد قليل من السلاسل إلى miniApp الخاص بي ، لذا فهو يعمل بشكل رائع في الإنتاج باستخدام AoT.
شكرا لك مرة أخرى!!!

P / S: أداة xliffmerge بواسطة Martin Roob هي أداة يجب استخدامها في الوقت الحالي ، ومترجمه الصغير أيضًا B-)

أنا أستخدم تجميع AoT ويدعم مشروعي لغتين: الإنجليزية والروسية. لقد وجدت حلاً مؤقتًا للمشكلة باستخدام تكوين البيئة.

يحتوي الملف environments/environment.ts على:

import { messagesEn } from '../messages/messages-en';

export const environment = {
  production: false
};

export const messages = messagesEn;

يوجد أيضًا ملفان آخران environment.prod-en.ts و environment.prod-ru.ts بالمحتوى التالي:

import { messagesEn } from '../messages/messages-en';

export const environment = {
  production: true
};

export const messages = messagesEn;

وللروسية:

import { messagesRu } from '../messages/messages-ru';

export const environment = {
  production: true
};

export const messages = messagesRu;

يمكن أن يحتوي كل ملف رسالة على شيء مثل هذا:

export const messages = {
  MessageKey: 'Translation',
  AnotherMessageKey: 'Translation',
  Group: {
    MessageKey: 'Translation',
    AnotherMessageKey: 'Translation',
  }
};

في الكود الخاص بي (المكونات ، الخدمات ، إلخ) أقوم فقط باستيراد الرسائل:

import { messages } from '../../environments/environment';

واستخدمها:

alert(messages.MessageKey);

في .angular-cli.json قمت بتحديد البيئات التالية للإنتاج:

"environments": {
  "dev": "environments/environment.ts",
  "prod-en": "environments/environment.prod-en.ts",
  "prod-ru": "environments/environment.prod-ru.ts"
}

إنها تعمل!

@ alex-chuev هل جربت هذا مع JIT؟

ocombe أي تقدير تقريبي متى سيكون هذا متاحًا؟

ميزة كبيرة راجع للشغل :)

إنها معلقة حتى يتم إجراء تغييرات على المترجم ، لذلك ليس 4.2 ، ما زلت آمل أن أقوم بهذا لـ 4.3

يعرف أي شخص كيفية تنفيذ i18n في قيم المعلمات على سبيل المثال في [title] في المثال التالي:
بمعنى آخر ، أضف ترجمة لكلمة HELLO

مع تحياتي

شون

إذا كانت HELLO مجرد سلسلة تكتبها في قالب HTML ، فيمكنك القيام بما يلي:
"" html

""
الوثائق مثال على ذلك. انظر هنا: https://angular.io/docs/ts/latest/cookbook/i18n.html#! # ترجمة-سمات

إذا كان عليك الارتباط بخاصية سلسلة في المكون ، فيجب عليك انتظار هذه الميزة ، أو تنفيذ طريقة مخصصة للترجمة (على حد علمي).

تضمين التغريدة

ما زلنا نعمل على التصميم ، وهناك الكثير من الأشياء غير المتوقعة التي يجب أخذها في الاعتبار (مثل كيف يمكن للمكتبات إرسال ترجماتها الخاصة) ، ...

هذا مهم جدا. آمل أن تكون جزءًا من هذه الميزة أيضًا. لأنه في الوقت الحالي لا أرى الطريقة التي يمكن بها لمكتبة الجهات الخارجية توفير ترجمات لتطبيقك. أثناء الإنشاء ، يمكنك تحديد ملف XLIFF واحد فقط ، ويبدو أنه يتعين عليك إنشاء مكتبتك مسبقًا حتى تتمكن لغتك من ترجمتها.

نعم ، أنا في انتظار ذلك أيضًا! هذا مهم جدًا للمشاريع المخصصة للجمهور غير الناطق باللغة الإنجليزية!

إنه أمر نرغب في دعمه بالتأكيد ، يعمل الفريق على إعادة هيكلة المترجم الذي سيسمح لنا بالقيام بذلك :-)

هل هناك تقدير للإصدار الذي سيتم استهدافه؟ قرأت في مكان ما أنه قد يكون حوالي 4.3؟

بسبب ضرورة إعادة البناء (وكسر التغييرات) ، لن يكون ذلك قبل الإصدار الخامس ، أخشى

Whaaaat 😳 أوه لا ، أنا أنتظر هذه الميزة 4.2 التي قلتها والآن هي لـ v5 كنت أفكر في v5 ستكون لغة ديناميكية متغيرة لا تطلق كل إصدار ولكن على أي حال آمل أن يكون يومًا ما حتى مع 36k بنية مختلفة لكل منها لغة. أنا فقط أتساءل متى يكون الإصدار 5؟ شكرا

تضمين التغريدة

istiti قلت إنه لم يكن تاريخًا مضمونًا ؛-)
جدول الإصدار هنا: https://github.com/angular/angular/blob/master/docs/RELEASE_SCHEDULE.md
الإصدار الأخير من v5 هو 2017-09-18 ، ولكن سيكون هناك إصدارات تجريبية و RCs من قبل

هل هناك أي تغييرات لإنشاء ملف محلي واحد لكل مكون؟ يعني ، إنشاء أجزاء من messages.xlf ، على سبيل المثال: messages.{component}.{locale}.xlf وعلى سبيل المثال فقط messages.{component}.xlf للغة الافتراضية.

ليس بعد

الضرر هو الحد الأدنى الصارم بسبب بناء الوقتocombe

أنا محتار .. هل هذا التغيير / التغيير رسمي أم لا؟
نظرًا لوجود نفس المشكلة هنا ، فإن الترجمات ببساطة لا تنطبق فقط على القوالب.
وجود إعادة ومكونات مخصصة لاستعراض الشجرة وما إلى ذلك ... تم إنشاؤها كلها من كائنات جافا سكريبت IN CODE ، وليس لكل قالب

إنه رسمي ، وهو قادم ولكن كان علينا إجراء تغييرات عميقة أخرى على المترجم أولاً ولهذا لم يكن جاهزًا لـ 4.3

هل من المعروف في أي إصدار بالضبط ستكون هذه الميزة متاحة / مخطط لها؟ 4.3.1، 4.3.2 ... 4.3.x؟

لا يوجد إصدار رئيسي / ثانوي لفرع 4.x (التصحيحات فقط: https://github.com/angular/blob/master/docs/RELEASE_SCHEDULE.md) مما يعني أن هذا سيكون لـ 5.x ، لست متأكدا أي واحد.

هل لا يزال من المتوقع أن يصل هذا إلى 5.x؟ لا يمكنني رؤيته في الإصدارات التجريبية. شكرا

قد يكون في v50.x وليس v5.x 😂

5.x نعم ، لكنه لن يكون في 5.0 على الأرجح

لو جو. 3 منذ 2017 ، 12:56 ، vltr [email protected] écrit:

قد يكون في v50.x وليس v5.x 😂

-
أنت تتلقى هذا لأنه تم ذكرك.
قم بالرد على هذا البريد الإلكتروني مباشرة ، وقم بعرضه على GitHub
https://github.com/angular/angular/issues/11405#issuecomment-319936876 ،
أو كتم الخيط
https://github.com/notifications/unsubscribe-auth/AAQMorXMbyI8l6K3QA4jmXEKawiEC46xks5sUad0gaJpZM4J2pkr
.

مرحبًا ocombe ، أنا مهتم جدًا بعملية جعل هذا يعمل وماذا عن الطريقة التي يعمل بها المترجم حاليًا تجعل هذه المهمة أصعب. هل لديك أي وضوح بشأن الشكل الذي يبدو عليه الجدول الزمني أم أن هذا لا يزال غير محتمل 5.0 ولكن بعض 5.x؟

arackow سيكون في 5.x على الأرجح ، vicb يعمل على التغييرات الأخيرة للمترجم والتي ستجعل هذا ممكنًا في النهاية

ocombe ... هل هناك أي مستند تصميم يصف مفهوم الحل للسلاسل خارج القوالب؟ نحن في مرحلة تطوير المشروع حيث سيكون من الرائع معرفة ذلك ، لذلك سنكون قادرين على إعداد حل مؤقت بطريقة ما ، وفي وقت لاحق سيكون من الأسهل بكثير التبديل إلى الصيغة الزاويّة النهائية.

كان لدينا مستند تصميم ولكنه كان يعتمد على الإصدار السابق من المترجم وربما ليس التنفيذ الذي سنقوم به في نهاية المطاف. سنقوم بعمل مستند تصميم عام جديد بمجرد أن تكون لدينا فكرة أفضل عن التنفيذ الجديد

ocombe لا بد لي من +1 هذه الميزة. حاجة ماسة لذلك الآن لول: +1: شكرا لكم يا رفاق على صنع أدوات مذهلة! :)

كما أفهم مستند التصميم الحالي ، سيحتاج مؤلف مكتبة AOT إلى توفير الترجمات لجميع اللغات التي تتطلبها التطبيقات المختلفة التي تستخدم هذه المكتبة.
هل فهمت هذا بشكل صحيح؟

هذه نقطة جيدة @ gms1.
لقد اختبرت هذا هنا .
بصفتك مؤلف مكتبة ، ما عليك سوى إضافة علامات i18n.
يجب ألا تقوم بترجمة مكتبتك إلى " ngfactories " (راجع حديث Jason Aden في ng-conf 2017) ، لذلك لن يتم استبدال علامة الترجمة. بهذه الطريقة عند تشغيل الأمر ng xi18n ستحصل أيضًا على ترجمة في xliff للملفات الموجودة في مجلد node_modules.

لذلك لا ، ليس عليك تقديم ترجمات ، ولكن لإضافة علامات i18n ذات المعاني المفيدة.

مقتبس من مستند التصميم:

بالنسبة إلى AOT ، يتم تحويل شفرة المصدر لاستبدال مكالمات الخدمة بترجمات ثابتة. للقيام بذلك سوف نستخدم محول TypeScript.

إذن ماذا يعني هذا إذا كانت مكتبة الزاوية (AOT) ستُنشر عادةً في شكل مترجم؟ لم أجد أي إشارة إلى .metadata.json في هذا المستند

يجب ألا تقوم بتجميع مكتبتك إلى الكود النهائي ، ولكن عليك تجهيزها ليتم تجميعها بواسطة المطور باستخدام التعليمات البرمجية الخاصة بك. شاهد ما يذكره jasonaden هنا . هذا يعني أيضًا أنه يمكنك جعل مكتبتك قابلة للترجمة عن طريق إضافة علامة i18n.

@ gms1 كما قلت:

كان لدينا مستند تصميم ولكنه كان يعتمد على الإصدار السابق من المترجم وربما ليس التنفيذ الذي سنقوم به في نهاية المطاف.

ويتم تغيير برنامج التحويل البرمجي AOT على نطاق واسع للإصدار 5 ، يجب أن يكون من الأسهل على libs نشر كود "aot-ready".
بالنسبة إلى i18n ، نريد أن نجعل ذلك سهلاً / مرنًا قدر الإمكان أيضًا ، فمن المحتمل أن يكون شيئًا مثل: يمكن للمكتبات نشر ملفات الترجمة التي يمكنك استخدامها ، ولكن يمكنك أيضًا تجاوزها إذا كنت تفضل ذلك ، ويجب أن تكون قادرًا على توفير لغات إضافية أيضًا إذا كانت المكتبة لا تدعمها افتراضيًا

شكرا لك ocombe على هذا التوضيح!

ocombe هل هذا يعني أن ميزات ngx-translate ستكون متاحة في الزاوية نفسها؟

@ montreal91 لا يمكن تنفيذ أي جزء من أجزاء ngx-translate كما هو الحال في الزاوية ، lib الخاص بي لديه نهج ساذج للغاية ، إنه يعمل "في الغالب" ولكننا نريد أن نكون أكثر كفاءة مع إطار العمل.
ومع ذلك ، ستوفر الزاوية ميزات متشابهة (حتى لو كان التنفيذ النهائي مختلفًا).

هذا هو منهجي (FLUX) أثناء عملي على نظام إعلام لواجهة المستخدم بناءً على (https://github.com/PointInside/ng2-toastr). تكمن المشكلة في أن محتوى الإخطار يتم تحديده في استدعاء الخدمة بدلاً من القالب الذي تتم إدارته بواسطة نظام angular i18n (xi18n)

ليس هذا ما أرغب به ، لكنه حل عملي. يمكنك _ استخراج_ الفكرة من اتباع أجزاء التعليمات البرمجية. أتمنى أن يساعد :)

في أى مكان

// this call in any other component, service... 
// "info" method parameter is the "id" of the HTML element in template NotificationComponent.html
this.notificationActionCreator.success("myMessage");

NotificationComponent.ts

@Component({
    selector: 'notification-cmp',
    templateUrl: '../../public/html/NotificationComponent.html'
})
export class NotificationComponent implements OnInit, OnDestroy, AfterViewInit {

    notificationMap: Map<string, any> = new Map();
    subscription: Subscription;

    constructor(private toastr: ToastsManager,
                private vcr: ViewContainerRef,
                private store: NotificationStore,
                private elementRef: ElementRef) {

        this.toastr.setRootViewContainerRef(vcr);
    }

    ngOnInit() {
        this.subscription = this.store.payload
            .subscribe((payload: NotificationStorePayload) => this.handleStorePayload(payload));
    }

    ngOnDestroy(): void {
        this.store.destroy();
        if (null != this.subscription) {
            this.subscription.unsubscribe();
        }
    }

    ngAfterViewInit(): void {
        this.elementRef.nativeElement.querySelectorAll("div[notification-title][notification-text]")
            .forEach(el => this.notificationMap.set(el.id, {
                    title: el.attributes["notification-title"].value,
                    text: el.attributes["notification-text"].value,
                })
            );
    }

    handleStorePayload(payload: NotificationStorePayload): void {

        if (null != payload.action) {
            let notification = this.notificationMap.get(payload.notification.id);

            switch (payload.notification.type) {
                case NotificationType.SUCCESS:
                    this.toastr.success(notification.text, notification.title);
                    break;
                case NotificationType.INFO:
                    this.toastr.info(notification.text, notification.title);
                    break;
                case NotificationType.WARNING:
                    this.toastr.warning(notification.text, notification.title);
                    break;
                case NotificationType.ERROR:
                    this.toastr.error(notification.text, notification.title);
                    break;
            }
        }
    }
}

NotificationComponent.html

<div hidden
     id="myMessage"
     i18n-notification-title="@@notificationTitleMyMessage"
     i18n-notification-text="@@notificationTextMyMessage"
     notification-title="Greeting"
     notification-text="Hello world"></div>

<div hidden
     id="error"
     i18n-notification-title="@@notificationTitleError"
     i18n-notification-text="@@notificationTextError"
     notification-title="Error"
     notification-text="Something went wrong!"></div>

الآن بعد أن تم إصدار Angular 5 ، هل لدينا أي تغيير في الوقت الذي سيتم فيه دمج التغييرات على وحدة i18n؟

يبدو أن هذه الميزة تعتمد على التغييرات التي تطرأ على المترجم الزاوي ، لكن الفرق المسؤولة عن المترجم تبدو أقل اهتمامًا. لا يبدو أن هناك مهمة أو علاقات عامة أو تعهدات: - (. آسف للتنفيس ، لكن طلب الميزة الذي يصف الوظائف الأساسية جدًا الموجودة في كل إطار عمل ترجمة آخر عمره الآن أكثر من عام. لقد قدمت نأمل أن تصل هذه الميزة الأساسية. على الأقل لـ 5.x ...

يحافظ الرجال على الهدوء. ليس من السخف تطبيقه في مترجم AOT. تحلى ببعض الثقة ، قال ocombe :

"سيكون على الأرجح في 5.x ، تعمل vicb على التغييرات الأخيرة للمترجم والتي ستجعل هذا ممكنًا في النهاية"

نعم نحن نعمل على وقت التشغيل i18n الآن وهي الخطوة الأولى.
وقت التشغيل i18n يعني: حزمة واحدة لجميع اللغات ، يمكن للمكتبات المترجمة من AOT استخدام i18n ، وربما لاحقًا القدرة على تغيير اللغة في وقت التشغيل. هذا يعني أيضًا أنه يمكننا القيام بالترجمات في وقت التشغيل ، وهو أمر ضروري للترجمات داخل الكود (لأننا نحتاج إلى محلل وقت التشغيل للترجمات ، إلخ ...).
عند القيام بذلك ، ستكون الأولوية التالية هي الترجمات داخل الكود.

لكن لم نتمكن من تشغيل وقت التشغيل i18n قبل أن نغير المترجم لاستخدام محولات الكتابة (وهو ما تم إجراؤه لـ 5.0)

أي فكرة عن إصدار 5.x الذي سيحتوي على تحسينات i18n؟ أي شيء يتم إصداره مع 5.0.0 نفسه؟

5.0:

• أنابيب i18n الجديدة (التاريخ / الرقم / النسبة المئوية / العملة) التي لا تستخدم واجهة برمجة التطبيقات الدولية التي أصلحت شيئًا مثل 20 خطأً لأنها تعمل الآن بنفس الطريقة عبر جميع المتصفحات + بعض التحسينات الأخرى (معلمة اللغة ، التنسيقات الإضافية الجديدة ، معلمة المنطقة الزمنية لـ أنبوب التاريخ ، ...)
• وظيفة i18n api الجديدة للمكتبات والمكونات: https://next.angular.io/api ؟query=getlocale
• تكامل أفضل مع CLI

5.1 أو 5.2 (إذا لم يكن هناك مانع غير متوقع):

• وقت التشغيل i18n

5.x:

• ترجمة كود i18n (وليس مجرد قالب)

والأشياء الأخرى التي سنضيفها على طول الطريق ولكن لم يتم تحديدها بعد (يمكنك متابعة https://github.com/angular/angular/issues/16477).

مجرد أفكار غريبة ، على الرغم من تأخري قليلاً ، فقط من خلال التفكير في دعم i18n في ملف TS ، فلماذا لا نفكر في بناء جملة التعليقات التوضيحية؟ (لقد وجدت أن شخصًا ما ذكره أعلاه أيضًا)

سيكون المثال:
@ i18n (id = 'message1')
message1 = "هذه رسالة تحتاج إلى الترجمة" ؛

@ i18n (id = 'dynamicMessage')
dynamicMessage = "هذه رسالة ديناميكية بـ {0}" ؛

من خلال التعليق التوضيحي لـ dynamicMessage ، يمكننا حقن وظيفة من خلال التعليق التوضيحي لمثيل السلسلة هذا ، وهو الاسم الذي يمثل التنسيق ، ثم يمكننا استخدام ما يلي:
var finalMessage = dynamicMessage.format ('value1')

قد يكون من الممكن اتباع نهج مماثل لرعاية المعلمات المسماة وما إلى ذلك.

أعتقد أن السؤال لا يتعلق بكيفية تقديم تجربة مطور جيدة. السؤال عن التجميع.

ماذا يحدث أيضًا إذا قمت بتغيير message1 إلى سلسلة أخرى؟ يجب أن تكون جميع متغيرات i18n ثوابت دائمًا. لا أعتقد أن استخدام المتغيرات سيعمل على الإطلاق. على سبيل المثال ، لدى Symfony خدمة مترجم مع وظيفة ترجمة والتي ستعمل على النحو التالي في بناء جملة JS: let translated = this.translator.trans('Hello %name%', [{'%name%': nameVariable}]); والذي سينتج عنه: <source>Hello %name%</source> <target>Bonjour %name%</target>

MickL الهدف من الترجمة -aot الحالية هو إنشاء برنامج بسيط وفعال. هذا هو سبب عدم وجود نهج للترجمة الديناميكية حتى الآن.
أعتقد بشدة أن النهج الحالي جيد حقًا ، بمعنى أننا لا نستخدم خدمة الديناميكيات لترجمة الجمل. هذا يعني أنك إذا كنت تعلم أن بعض النصوص ثابتة ، فيرجى ترجمتها بهذه الطريقة دون استخدام خدمة.

مشكلة الترجمة الديناميكية بسيطة ، وهي إذا كنت ستترجم سلسلة في كل مرة تعرضها. ليست طريقة جيدة حقًا ،
لماذا ا؟

1. لأن لديك قاموسًا من عدة لغات في الذاكرة عندما لا تستخدمه.
2. في كل مرة تعرض فيها نصًا ديناميكيًا ، يلزمك الانتقال إلى الخريطة والعثور على مفتاح ثم البحث عن ترجمة اللغة. في كل مرة لأن لديك "لغة رئيسية".

من وجهة نظري الحل المستقبلي يجب أن يكون:

1. تمنحك الواجهة الخلفية النص الذي تريد ترجمته.
2. استبدل / (أو نزّل من الخلفية وهو الأسلوب الحالي) كل نص تعرضه باللغة الحالية / الرئيسية. (استبدل كل شيء احصل على الوقت ، لكنك لست بحاجة إلى العثور على مفتاحين في كل مرة تريد إظهار ملصق بسيط).
3. يمكن فقط استبدال النص الديناميكي الحقيقي و / أو طلبه إلى الخلفية.

فكر في الأمر ، إذا كان لديك حقًا نص ديناميكي لإظهاره ، فيمكنك استلامه من الواجهة الخلفية ، وإذا كنت حقًا بحاجة إلى نسخة من هذا "النص الديناميكي" ، فيمكنك دائمًا استخدام ذاكرة التخزين المؤقت لذلك.

في رأيي ليست هناك حاجة لمناقشة هذه المسألة بعد الآن. في الواقع هناك رجل (أوليفييه كومب) يعمل طوال الوقت على i18n. AOT خاص جدًا وكان يجب القيام بالكثير من العمل قبل جعل هذه المشكلة قريبة من الحد الممكن. قريبًا سيكون لدينا ترجمات ديناميكية: لا حاجة بعد الآن لبناء كل لغة على حدة! عند الانتهاء من ذلك ، سيكون لدينا ترجمات داخل الكود (هذه المشكلة) لاحقًا. وقال إن الطريق حتى حل هذه المشكلة آمل أن يستغرق نصف عام من الآن فصاعدًا.

إذا كنت مهتمًا ، تحقق من خطابه على Angular Connect في 07.11.17 حول حاضر ومستقبل i18n في Angular: https://youtu.be/DWet6RvhHWI؟t=21m12s

هذه الرائحة تشبه حالة الاستخدام الجيد لسلاسل القالب المطبوع عليها علامات ...

هذه الرائحة بشكل عام. أزور هذا الموضوع مرة كل شهر للتحقق من التقدم وتوقفت عن الشعور بخيبة أمل بسبب انخفاض التوقعات. الشيء الوحيد الذي يريده المطورون هو أن يكون لديهم نفس الخيارات لترجمة النصوص في الكود كما في القوالب. إن الكود الخاص بي مليء بسلاسل القوالب المترجمة المخفية بسبب نقص الوظائف. سواء تم تحقيق ذلك في النهاية من خلال خدمة أو التعليقات التوضيحية ، فهذا أمر غير ذي صلة ولا يهم إذا استغرق الأمر ملي ثانية إضافية. أنا بالفعل أشاهد شيئًا ما من أجل التغييرات عندما أختار سلسلة من التعليمات البرمجية. الشرط الوحيد هو أن الكود يتم تحليله وينتهي الأمر بالسلاسل ذات الصلة في نفس الملفات بنفس تنسيق الترجمات القائمة على القوالب الخاصة بي.

eliasre يمكنك تجربة https://github.com/ngx-translate/i18n-polyfill إذا كنت في عجلة من أمرك لترجمة الكود
لا توجد وعود بأنه سيكون هو نفسه ، على الرغم من أنه في الواقع سيكون مختلفًا (كما هو الحال في الاستخدام الأسهل) ، فهناك قيود على ما هو ممكن الآن ... وسيضيف ~ 80ko إلى تطبيقك لاستخدامه هذا lib

يمكنك استخدام ترجمة ngx إذا كنت لا تريد الانتظار

ocombe هل تمانع في تقديم تحديثات حول التقدم حتى نتمكن من تتبع الجداول الزمنية للتطوير والتخطيط وفقًا لذلك عند انتظار القرارات بشأن المكونات الإضافية أو الأطر التي يجب استخدامها؟ سيكون مفيدًا ومقدرًا جدًا

eliasre أعتقد أن google تريد تقديم حل جيد مرة واحدة. دون كسر التغييرات في المستقبل. أوافق على أن الأمر يستغرق وقتًا أطول مما نعتقد.

لا تزعج الفقراء ocombe فهو يعمل بجد للغاية!
أبقه مرتفعا! :)

أنا لست الشخص الذي يعمل على هذه الميزة ، وهي عطلة الأعياد ، وسأخبرك بمجرد معرفة المزيد

شكرا ocombe

شكرًا ocombe ، أي تحديثات ستكون موضع تقدير كبير هنا. لقد كنت أنتظر بشدة وقت تشغيل i18n خلال الأشهر القليلة الماضية ، وكان آخر إصدار من ETA هو 5.2. هل يمكنك إخبارنا بمجرد حصولك على ETA محدث هنا؟

نأسف لكونك مثابرًا للغاية ، ولكن بناء 20 لغة ينتهي به الأمر إلى أن يكون بطيئًا للغاية في الوقت الحالي.

نظرًا لأن Angular 5.2 تم إصداره وللأسف لم أتمكن من العثور على أي شيء متعلق بـ i18n (أو هل أغفلت شيئًا ما؟) ... -ocombe ، ربما يمكنك إطلاعنا على خطة الإصدار؟ شكرا جزيلا شكرا جزيلا لجهودك على i18n!

ocombe ليس الشخص الذي ننتظره هنا ... تحقق من رابط youtube في هذا التعليق: https://github.com/angular/angular/issues/11405#issuecomment -343933617

التخطيط يتطور باستمرار. كلما أعطيت تاريخ إصدار محتملًا ، اتضح أن شيئًا آخر يحصل على الأولوية أو يصبح مطلوبًا ويغير التاريخ مرة أخرى. أعلم مدى خيبة الأمل بالنسبة لكم جميعًا الذين ينتظرون هذه الميزة ، وأنا أفعل كل ما في وسعي لزيادة الأولوية.
لدينا اجتماع غدًا لمناقشة تراكم / تخطيط i18n ، وسأخبرك إذا حصلت على أي شيء جديد.

ocombe إذا تم إصدار i18n هذا الشهر سأشتري لك 24 عبوة من البيرة المصنوعة يدويًا

سأضيف 24 زجاجة من البيرة الألمانية و 24 زجاجة أخرى إذا سألت عما تفعله Angular Elements ودعم المكتبة. لعنة عدم الحصول على المعلومات ما يجري أمر مروع.

ocombe لديك هذه الفرصة النادرة مرة واحدة في العمر للحصول على 72 زجاجة من البيرة الحرفية باهظة الثمن ، وجعل مجتمع التنمية سعيدًا. سنفي بوعودنا إذا أنجزت هذه الأشياء يا صديقي.

MickL Angualr Elments ، كما أفهم ، سيتيح لنا إنشاء صفحات بخلاف SPA واستخدام المكونات الزاويّة كعناصر أصلية (كعناصر ذاتية أيضًا)

نعم انا اعرف. هذه ميزتان أخريان ينتظرهما الجميع ولكن لا أحد يعرف ما هي الحالة ومتى يتوقعها ...

إذا وعد شخص ما بإضافة آخر 27 زجاجة من البيرة ، فيمكننا البدء في العد التنازلي!
http://www.99-bottles-of-beer.net/language-javascript-1948.html

سأضيفهم ، ocombe : اسم علامتك التجارية المفضلة: D.

تحرير: قام شخص ما بإنشاء خدمة مشابهة لـ eth bounty باسم beerbounty: p

كما وعدنا ، تحديث بسيط: ما زلنا نهدف إلى إصدار وقت التشغيل i18n في الإصدار 6 ، والذي يمنحنا 5 أسابيع. ستكون قصيرة ، ومن المحتمل أن تتم إضافتها في أحد الإصدارات الأخيرة ، وستكون خلف العلم.
يجب أن يأتي وقت التشغيل i18n مع ترجمات الكود ، لأن هذه هي الطريقة التي ستعمل بها مع القوالب أيضًا على أي حال (يجب أن تستخدم نفس الآلية).
ومع ذلك ، فليس من المؤكد أن الخدمة ستكون جاهزة بنسبة 100٪ ، وقد نؤجلها للتأكد من أننا لن نكسرها بعد إطلاقها مباشرة ، إذا شعرنا أنها الخيار الصحيح. لكنها ستتبع وقت التشغيل i18n على أي حال (هذه خارطة الطريق الخاصة بنا) ، ولسنا بحاجة إلى إصدار رئيسي لإصداره لأنه سيكون خلف علم ، ولا ينبغي أن يكسر أي شيء على أي حال).

ما الذي يمنعنا من إطلاقه في الوقت المناسب:

• إذا تعثرنا في مشكلة غير متوقعة (أنت تعرف كيف يعمل التطوير)
• إذا كان يكسر تطبيقات Google الداخلية لأننا أفسدنا في مكان ما
• إذا كان هناك شيء ذو أولوية قصوى وعلينا تبديل تركيزنا
• إذا تم حظر أو تأخير أحد الأشياء الجديدة التي يعتمد عليها (يعتمد وقت التشغيل i18n على بعض التغييرات الداخلية الرئيسية التي يعمل عليها أعضاء الفريق الآخرون)

• مطور أنجولار جي إس ، كان يستخدم لغة ترجمة PascalPrecht لمدة 3 سنوات.
• أمتعني. الزاوي 2 الصاعد. تصفح بسذاجة https://angular.io/guide/i18n
• تم دمج i18n بنجاح في مشروعي الاحترافي
• قضاء يوم كامل في العبث بجميع الملصقات ذات الترميز الثابت للواجهة الأمامية ، وتحويلها إلى ملف 100 + kb xlf
• في حاجة إلى ترجمة الملصقات الأولية ضمن خدمات المنظمات غير الحكومية
• أبحث عنه في جوجل ، كن هنا
• اكتشف أنه لا يوجد حل قبل أن يبلغ عمر Angular 6 سنوات.
• لي rn
  

Macadoshis ، يمكنك استخدام polyfill lib الخاص بي في الوقت الحالي: https://github.com/ngx-translate/i18n-polyfill

Macadoshis تخيل الآن ما مررنا به منذ alpha.46! ؛)

شكرًا لك على توجيه i18n- polyfill لي ocombe ، لكنني سأختار ngx-translate لأنه يدعم التحميل غير المتزامن لمفاتيح الترجمات.
يبدو أن مصنع i18n-polyfill لمزود TRANSLATIONS يدعم فقط التحميل الأولي للمزامنة للإعدادات المحلية الثابتة المعروفة قبل التمهيد.

// sync loading
return require(`raw-loader!../locale/messages.${locale}.xlf`);

// @ngx-translate/i18n-polyfill/esm5/ngx-translate-i18n-polyfill.js
Tokenizer.prototype._advance = function () {
    //...
    this._index++;
    // "this._input" needs to be a string and can't handle a Promise or an Observable
    this._peek = this._index >= this._length ? $EOF : this._input.charCodeAt(this._index);
    this._nextPeek = this._index + 1 >= this._length ? $EOF : this._input.charCodeAt(this._index + 1);
}

ocombe ما مدى قرب polyfill الذي كتبته إلى ما يتم إصداره؟ أي شيء يجب أن نكون على علم به أو نستعد له؟ أيضًا ، هل تمانع في إدراج قائمة بالميزات مع i18n التي تم إصدارها في الإصدار 6 ، وكيف يجري الاختبار مع i18n؟

ليس لدي المزيد من التفاصيل حول خدمة ترجمة الكود في الوقت الحالي ، وسنعمل عليها الأسبوع المقبل على الأرجح (سأسافر إلى ماونتن فيو). كل ما أعرفه هو أنه خلف الكواليس سيكون مشابهًا لـ goog.getMsg من مكتبة الإغلاق (نظرًا لأنه ما تستخدمه Google داخليًا في الوقت الحالي): https://github.com/google/closure-library /blob/db9bc1a2e71d4b6ee8f57eebe37eb0c6494e9d7e/closure/goog/base.js#L2379 -L2387 الذي يشبه polyfill أيضًا.

في الإصدار 6 ، سنصدر وقت التشغيل i18n: حزمة واحدة لجميع اللغات ، وحُللت الترجمات في وقت التشغيل ، وربما ترجمات الكود إذا كان لدينا الوقت (وإلا فسيأتي ذلك بعد فترة وجيزة). سيكون كل ذلك خلف علامة لأنه يتطلب استخدام العارض الجديد (المسمى ng-ivy) والذي لن يتم اختباره في المعركة.

شكرا! ocombe ... هذا يبدو لطيفًا حقًا!
هل ستكون هناك تغييرات فجائية في بناء الجملة لترجمة النموذج؟ أفكر في إضافة ترجمات إلى مشروعنا الآن - لكن لا أريد إعادتها بالكامل في غضون أسابيع قليلة.

لا ، ستكون بنية النموذج هي نفسها

شكرًا ocombe على الأخبار الرائعة ، فهذا واعد للغاية. ما نوع جاهزية الإنتاج الذي يمكن أن نتوقعه من جهاز العرض ng-Ivy الذي سيتم إصداره مع الإصدار 6؟ أتفهم أنه لن يتم اختباره في المعركة ، لكنه سيظل جاهزًا للاستخدام الإنتاجي ويعمل على جميع متصفحات الإصدار الحالي تقريبًا ، أليس كذلك؟

يمكنك متابعة التقدم هنا: https://github.com/angular/angular/issues/21706
لا أعتقد أن كل شيء سيكون جاهزًا لـ v6 ، نظرًا لأنه تحت علم ، سنواصل التقدم في هذا الأمر حتى بعد إصدار v6 (إنه ليس تغييرًا كسرًا أو أي شيء)
بصراحة لست متأكدا ما هي كل هذه الأشياء: د
أعلم أن تطبيق hello world من cli يعمل بالفعل.
أعتقد أن هناك حاجة لبعض هذه الأشياء للاستفادة من تحسينات العارض الجديد ، ولكن من المحتمل أن تعمل بدون التحقق من كل شيء
ومع ذلك ، فهذا يعني أيضًا أنه لن يكون جاهزًا للإنتاج ، فلا تراهن على منتجك عليه الآن. لن يتم اختباره على تطبيقات Google الداخلية ، وقد نحتاج إلى إجراء بعض التغييرات العاجلة لإصلاح الأشياء. استخدام برنامج العارض الجديد وفقًا لتقديرك الخاص وعلى مسؤوليتك الخاصة

هل يوجد أي من هذا في الإصدار 6 بيتا 4؟

لا ليس كذلك. تحقق من خارطة الطريق هذه ، تم حظر هذه الميزة بواسطة وقت تشغيل i18n.

تحديثات ocombe ؟

تم دمج أول العلاقات العامة لوقت التشغيل i18n في التطبيق الرئيسي ، جنبًا إلى جنب مع تطبيق hello world demo الذي سنستخدمه لاختبار الميزات. إنه يعمل في وقت التشغيل ، ويدعم ترجمات الكود نظريًا ، حتى لو لم تكن هناك خدمة له حتى الآن.
في الوقت الحالي ، يوجد دعم ضئيل للغاية (سلاسل ثابتة) ، ونحن نعمل على إضافة ميزات جديدة (سأجعل الاستخراج يعمل الأسبوع المقبل ، ثم سلسلة ديناميكية مع العناصر النائبة والمتغيرات).
بعد ذلك سنقوم بخدمة ترجمة الكود.
بمجرد الانتهاء من ميزة جديدة يتم دمجها في ميزة رئيسية ، لن تضطر إلى انتظار تخصص جديد.

يجب أن تكون ميزات ocombe i heart i18n موجودة بالفعل في الإصدار 4.3 !! الافراج عن الكثير ولكن لا شيء على i18n. هل يمكن لمدير الفريق الزاوي تخصيص المزيد من الأعمال / المطورين عليه ، يمكنني أن أفهمك وحدك أو أن اثنين من المطورين لا يمكنهم المضي قدمًا بسرعة ، فهذه الميزة i 18n هي ميزة لا غنى عنها للتظاهر بأن الزاوية هي تطبيق أعمال / تطبيق كبير مع بناء سريع بالطبع هاتان الميزتان هما الأكثر أهمية للتطبيق الكبير ، ألا تعتقد ذلك؟ شكرا

أعتقد أن الشيء الوحيد الذي يمكننا قوله لـ ocombe هو شكره على كل الجهود التي يبذلها في هذه الميزة. أنا متأكد من أنه إذا لم يكن هناك المزيد من المطورين ، فهذا ليس لأنه لم يطلبهم. فقط دعه يفعل ، أنا متأكد من أننا لن نأسف عندما يتم إطلاق سراحه.

فقط للرجوع اليها...

لديّ أداة بديلة لاستيراد وتصدير السلاسل ، تم تطويرها في الأصل للاستخدام مع Aurelia ، والتي تتضمن دعمًا للسلاسل المخزنة في ملفات json - إنها سهلة الاستخدام تمامًا ، حيث يتيح لك Webpack استيراد json مباشرة ts ، مما يمنح شفرتك وصولاً سهلاً إلى تلك السلاسل.

تعمل هذه الأداة مع القوالب الزاويّة أيضًا ، وتحتوي على مجموعة من الميزات المفيدة الأخرى - استخدمها إذا أردت ، أو لا تتردد في استعارة الأفكار منها لتحسين أدوات Angular. هناك أيضًا أداة تحميل Webpack تعتمد على هذا - انظر الرابط في المستندات.

https://www.npmjs.com/package/gulp-translate

لدينا مشكلة أبسط ولست متأكدًا مما إذا كنا بحاجة إلى الميزة القادمة (أو polyfill بواسطةocombe).

نحدد بنية جميع الأشكال التفاعلية مع الثوابت ، حيث نضبط خصائص كل عنصر من عناصر النموذج. علي سبيل المثال:

loginForm = [
  {
    type: 'email',
    placeholder: 'EMAILPLACEHOLDER' // "Your email"
  },
  {
    type: 'password,
    placeholder: 'PASSWORDPLACEHOLDER' // "Your password"
  }
];

نستخدم حاليًا ngx-translate ، لذا نترجم في النموذج سلاسل مثل:

<input *ngFor="let ele of loginForm" [type]="ele.type" [placeholder]="ele.placeholder | translate">

نود الآن الانتقال إلى Angular i18n. ومع ذلك ، نظرًا لعدم وجود كل سلاسلنا في قالب ، يبدو أنه لا يمكننا استخدام Angular i18n خارج الصندوق.

لكن حالتنا تبدو أبسط من تلك التي تحتاج إلى استرجاع الترجمات في وقت التشغيل. جميع نصوصنا محددة مسبقًا في ثوابت ، ويمكن استبدالها في وقت الترجمة ، تمامًا كما يفعل x18n حاليًا للسلاسل في القوالب.

على سبيل المثال ، يمكن أن يكون لدينا سلسلة أكثر تعقيدًا مثل السلسلة التالية

placeholder: 'I18N:description|meaning@<strong i="16">@PASSWORDPLACEHOLDER</strong>:Your password'

في وقت الترجمة ، يمكن استبدال السلسلة إلى:

placeholder: 'Your password'

هل هذا شيء يمكن اعتباره للتنفيذ؟

يمكنك فعل ذلك بالتأكيد مع وقت التشغيل i18n ، يمكنك استخدام خدمة i18n الجديدة في أنبوب على سبيل المثال لتحويل العناصر النائبة إلى ترجماتها

لقد لاحظت أن هذا الخيط قد تم فتحه لبعض الوقت ، فهو يظهر الاهتمام الرئيسي بتطوير مواقع متعددة اللغات في Angular بطريقة بسيطة ، مع معالجة نصوص HTML وكود المكون عن كثب.
ocombe من فضلك لا تنس إرسال تنبيه لجميع المشتركين عندما يتم ذلك - لقد فهمت أنه قريب جدًا بحلول مايو 2018. وشكرًا على مساهماتك الكريمة!

ocombe ، هل يجب أن نستخدم Ivy حتى نتمكن من استخدام خدمات وقت التشغيل هذه أم أنها ستعمل مع المحرك القديم أيضًا؟

سيكون فقط مع اللبلاب ، والذي لا يمكنك استخدامه في الوقت الحالي لأنه لم ينته

شكرا على كل ما تبذلونه من العمل الشاق ocombe !

أي كلمة عن متى يمكننا استخدام هذه الميزات الجديدة؟

يمكن تمكين Ivy في الزاوية 6 باستخدام علامة مترجم الآن ، في حالة ما قبل الإصدار. هل يمكن استخدام ميزات 18n الجديدة هذه باستخدام الإصدار التجريبي من Ivy في هذا الوقت؟

ليس بعد ، ولكني أحقق تقدمًا جيدًا (أعمل بدوام كامل على هذا الآن). سأقوم بنشر تحديث هنا بمجرد إتاحته بشكل رئيسي للاختبار

شكرا جزيلا ocombe ! الكثير من الناس يستفيدون من عملك الشاق. نحن جميعا نقدر ذلك كثيرا!

ocombe هل ما زالت الترجمات الثابتة في TS مخططة؟ أعني استبدال تعبيرات الوقت ، على الأرجح باستخدام تحويل الكتابة المطبوعة.
إذا لم يكن الأمر كذلك ، فهل سنكون قادرين على توصيل تحويل ts المخصص إلى خط أنابيب ng build بدون استخلاص؟

لست متأكدًا من اتباع ما تعنيه TinyMan ؟ تقصد أن تكون قادرًا على دمج الترجمات في وقت الإنشاء (كما هو الحال الآن) ، أو أن تكون قادرًا على استخدام الترجمات في كود ts (إلى جانب ترجمات القوالب التي لدينا بالفعل)؟

ocombe أعني أن تكون قادرًا على استخدام الترجمة في ts ، ولكن ليس من خلال خدمة أو ترجمة DI / runtime. أعني ترجمة الوقت ولكن للطباعة. مثل معالج C. اعتقدت أن ذلك تم التخطيط له وفقًا لتعليق vicb :

• يمكننا أيضًا دعم الترجمات الثابتة كما نفعل اليوم للقوالب - سيتم استبدال السلاسل في وقت الترجمة ، وتحسين الأداء ولكن إصدار واحد من التطبيق لكل لغة ،

على سبيل المثال ، أريد أن أكون قادرًا على كتابة:

export const Notifications = {
    newComment: i18n("New comment notification@@newComment", "New comment on your story !"),
    newStory: i18n("New story notification@@newStory", "{{0}} wrote a new story !"),
}

ثم يتم تحويل هذا إلى شيء مثل (بالفرنسية):

export const Notifications = {
    newComment: "Un nouveau commentaire a été ajouté a votre article !",
    newStory: "{{0}} a écrit un nouvel article !",
}

حاليًا لهذا الغرض ، أستخدم ngx-translate مع محدد مخصص للاستخراج ( i18n في هذا المثال) ، وعندما أحتاج إلى عرض الرسالة ، يجب أن أتصل بـ this.translate.instant(Notifications.newStory, ["TinyMan"]) الذي يقوم بالترجمة + الاستيفاء. ما أعنيه هو أننا سنحتاج إلى أن نكون قادرين على كتابة Notifications.newComment بدون الاتصال بخدمة الترجمة. وبالنسبة لاستيفاء السلسلة ، يمكن أن يكون لدينا طريقة استيفاء تقوم فقط بوحدة العناية المركزة والاستيفاء (سيتم بالفعل ترجمة سلسلة القالب)

Notification.newStory // {{0}} a écrit un nouvel article, static string, no runtime translation
template(Notification.newStory, "TinyMan") // TinyMan a écrit un nouvel article !

هنا نتخلص فقط من طلبات HTTP الخاصة بالترجمة وأعباء الخدمة.

آمل أن يوضح ذلك؟

ما تصفه موجود بالفعل على خارطة الطريق لـ i18n.
في الوقت الحالي ، سيقوم https://github.com/ngx-translate/i18n-polyfill بأداء المهمة.

TinyMan لست متأكدًا حتى الآن مما إذا كان سيتم عبر خدمة أو وظيفة عالمية. كلاهما ممكن ، لكن الخدمة لها أيضًا الكثير من المزايا: يمكنك الاستهزاء بها للاختبارات ، أو استبدالها بأخرى خاصة بك ، كما يمكنك تغيير سلوكها لكل وحدة / مكون
أعلم أن Google داخليًا ستستخدم Closure i18n (عبر goog.getMsg ) وهي وظيفة عالمية ، ومن المرجح أن يتم استبدال الوظيفة بالخدمة أثناء التجميع بناءً على علامة عالمية. سأحاول معرفة ما إذا كان يمكن أيضًا استخدام هذا العلم خارجيًا ، لكنني لا أرى سببًا لا. ولكن إذا كنت تستخدم ذلك ، فسيكون مخصصًا للقوالب وترجمات الكود

ocombe أريد أن أقدم شكري هنا أيضًا. أنا أقدر بشدة العمل الذي تقوم به في هذا الأمر والذي سيكون مفيدًا للغاية بالنسبة لي في وظيفتي. سؤال واحد: هل هناك طريقة ، أو _سوف_ توجد طريقة ، للقيام بتجميع AOT الذي يجعل مجموعة واحدة فقط من ملفات الحزمة ، عند البحث عن نص ، تشير إلى xlf في وقت التشغيل للحصول على السلسلة الصحيحة؟

لذلك ستحتاج في الأساس إلى ملف xlf واحد لكل لغة بالإضافة إلى 5 أو 6 ملفات حزمة. في الوقت الحالي ، إذا كان لدينا 10 لغات وقمنا بتجميع أكثر من 50 ملفًا في AOT: مجموعة من ملفات الحزمة لكل لغة ...

لا أعرف الجهد أو مدى تعقيد شيء من هذا القبيل ، ولكن سيكون من الجيد أن يكون لديك تجميع aot ولكن مع مجموعة واحدة فقط من الملفات.

نعم ، هذا ما سنفعله مع Ivy ، وقت التشغيل i18n
قم بتجميع تطبيقك مرة واحدة ، وقم بتحميل الترجمات في وقت التشغيل (يمكنك التحميل البطيء للترجمات)

ocombe ذلك. يكون. لا يصدق.

هذا يجعلني سعيدا بشكل لا يصدق. شكرا!

بدون القدرة على ترجمة القوالب الخارجية ، i18n الميزة غير مجدية تمامًا بالنسبة لي.

ocombe مرحبا أوليفر!
أي تحديثات؟

شكرا!

إذا تم ذلك ، فلن يهم لأنه يتعين علينا انتظار اكتمال Ivy ، والذي من المقرر في Angular 7 (سبتمبر / أكتوبر 2018)

بواسطة Angular 7 ، سيكون هذا الإصدار لمدة عامين LOL.
على أي حال ، كان Ivy هو الشيء الذي أخر هذه الميزة الجديدة أكثر ...

ocombe ، من الرائع سماع ذلك. نحن حاليًا عالقون في استخدام خدمة i18n القديمة التي قمنا بتدويرها من الألف إلى الياء لهذا السبب فقط. عدم القدرة على القيام بذلك في JS يجعل من الصعب للغاية القيام ببعض الأشياء البسيطة لنا:

• مكونات ديناميكية
• التكامل مع خدمات الجهات الخارجية حيث يتعين علينا تقديم بعض النصوص المترجمة إليها
• يتم عرض نماذج التأكيد الديناميكية
• تعرض واجهة برمجة التطبيقات الخاصة بنا الخطأ types . في سياقنا ، نحتاج إلى ترجمة هذه الأخطاء ديناميكيًا وسيكون النهج القائم على القوالب هو kludgy.
• نريد استخدام TitleService كما يقترح فريق Angular ، ولكن لا توجد طريقة لتقديم نص مترجم!

أشعر بالفضول نوعًا ما حول كيفية تعامل فريق Angular مع هذا حاليًا ...

مرحبًا @ vincentjames501 ،
في شركتنا حاولنا أن نفعل الشيء نفسه الذي تفعله الآن ، لكنه كان مزعجًا للغاية ، لذلك انتهى بنا الأمر باستخدام i18n-polyfill المذكور سابقًا في هذا الموضوع ، وهو يعمل بشكل رائع حتى الآن.
العيب الوحيد الذي لدينا هو حجم حزم تطبيقنا. لدينا ثلاثة ملفات ترجمة ، وتحتوي كل حزمة على كل منها بالداخل (لم نكتشف طريقة لإنشاء الحزمة فقط بالترجمة التي تستخدمها). لكن كل هذا مجرد مضايقات نأمل أن يتم حلها عندما يخرج Ivy.
هتافات،

لقد قمت بتضمين خريطة ترجمة وأعدت تصديرها في ملف environment.ts لكل لغة. إنه يعمل بدون مشاكل ، ولا يتم تضمينه في جميع الحزم ، ولا يتطلب مكتبة خارجية. المشكلة الوحيدة التي أواجهها هي أنه نظرًا لأن موقع evey مختلف ، فلا يمكنني الحصول على نفس عامل الخدمة لجميع اللغات ، وإذا قام شخص ما بتبديل اللغات ، فلن يتمكن موقعي من معرفة ما إذا كان قد تم تسجيله بالفعل للحصول على إشعارات الدفع أم لا ...

ocombe أي خبر في الزاوية 6؟

لن يكون في Angular v6 ، كما هو موضح أعلاه. نحن نعتمد على Ivy المخطط له الإصدار 7.

ocombe ، هل لي أن أقترح عليك قفل هذا الموضوع ، بحيث يمكن للفريق فقط تقديم تحديثات ذات مغزى عندما يكون ذلك مناسبًا ونتجنب الأسئلة المتكررة التي تستمر في الإجابة عليها؟

الاختراق الخاص بي للاستخدام مع Angular الحالي هو استخدام ng-template وإنشاء طريقة العرض المضمنة برمجيًا:

<ng-template #messagetotranslate i18n>This message should be translated</ng-template>

ثم في ملف ts المكون:

@ViewChild('messagetotranslate') messagetotranslate: TemplateRef<any>;

createTranslatedMessage(): string {
  return this.messagetotranslate.createEmbeddedView({}).rootNodes[0].textContent;
}

تقوم الطريقة createTranslatedMessage بإرجاع الرسالة المترجمة. على الرغم من أنني أستخدم القالب للإعلان عن الرسالة غير المثالية ، فإن هذا يجعل من الممكن لأداة ترجمة CLI تسجيلها في ملفات xlf ، ولدي طريقة للحصول على الرسالة المترجمة برمجيًا لاستخدامها خارج القوالب.

نأمل أن تعمل واجهة برمجة التطبيقات مع المسارات أيضًا! علي سبيل المثال

export const routes: Routes = [
 {
  path: '',
  component: HomeComponent,
  data: {
   title: i18n('Home'),
   breadcrumb: i18n('Home')
  }
 }
]

إذا تم إطلاق هذه الميزة ، فهل سيكون هناك تغيير كبير من i18n api الحالي؟ هل تنصحني ببدء مشروعي مع i18n الآن أم يجب أن أنتظر i18n Api الجديد عند إصدار Angular 7؟

أي تحديث متى سنحصل على دعم الترجمة الديناميكي ووقت التشغيل؟

تتم ترجمة وقت التشغيل ودمجها (مع Ivy) ، لكن جانب المترجم لم ينته بعد.
أنا أعمل على تعابير وحدة العناية المركزة في الوقت الحالي.
لم أبدأ بعد في ترميز الترجمات الديناميكية (الخدمة) ، لكن من المحتمل أن يكون هذا هو الشيء التالي الذي سأفعله بعد تعبيرات وحدة العناية المركزة.

@ vincentjames501 هل يمكننا استخدام i18n-polyfills مع تعبير ICU؟ ليس لدي حل لكيفية تنفيذ ذلك

ocombe ، هل يمكنك من فضلك توضيح الفرق بين وقت التشغيل والترجمة الديناميكية؟

ربما لا توجد فئة رسمية ، لكن الطريقة التي أراها هي:

• وقت التشغيل: يتم حل الترجمات في وقت التشغيل ، أي ليس أثناء الإنشاء (كما نفعل حاليًا). ينطبق على جميع أنواع الترجمات (القوالب أو في التعليمات البرمجية)
• ديناميكي يعني أنك تعرف فقط ما تريد ترجمته في وقت التشغيل ، ولا يمكنك فعل ذلك في وقت الإنشاء. إنه ينطبق في الغالب على الترجمات "في الشفرة" ، باستخدام خدمة. أعتقد أنه يمكنك اعتبار تعبيرات وحدة العناية المركزة ديناميكية بمعنى أنها تعتمد على متغير ، ولكن لا يزال بإمكانك حساب جميع الترجمات المحتملة في وقت الإنشاء لأن عدد الحالات محدود.

لقد أجلت إضافة دعم i18n إلى المشروع الحالي الذي نقوم بتطويره ولكننا اقتربنا من الإصدار ، هل لديك أي فكرة عما إذا كان هذا سيكون نهائيًا في الزاوية 7؟ أم يجب أن أفكر في طرق أخرى لإضافة الترجمات؟

@ andrei-tatar i18n يعمل بشكل مثالي منذ Angular 2. الجوانب السلبية الوحيدة:

• لا توجد ترجمات للأكواد (هذه المشكلة) -> إذا كنت بحاجة إليها ، فاستخدم i18n-polyfill
• إذا قمت بإنشاء AOT (موصى به) ، فيجب إنشاء التطبيق لكل لغة على حدة
• نظرًا لأن كل تطبيق تم إنشاؤه بشكل منفصل ، عند تبديل اللغة ، يجب عليك إعادة تحميل الصفحة

بالنسبة للنقطتين الأخيرتين ، يمكنك استخدام @ ngx-translate بدلاً من ذلك. لكنه يعمل بشكل مختلف عن Angular's المدمج في i18n لذا قد يستغرق التحديث اللاحق بعض الوقت. بالنسبة إلى polyfill ، لن يكون التحديث وقتًا مع عدم وجود تغييرات عاجلة على الأرجح.

تضمين التغريدة

كيف يمكننا التعامل مع عامل التشغيل الشرطي باستخدام ميزة Angular i18n

في الجمعة ، 24 آب (أغسطس) 2018 ، الساعة 16:56 مساءً ، ديفيد والثر بيرك لوريسن ، <
[email protected]> كتب:

@ shobhit12345 https://github.com/shobhit12345

نستخدم ngSwitch لقالب جميع الرسائل ، حتى نتمكن من إرفاق علامات i18n بـ
كل منهم على حدة.

يخفييعرضتاريخ

نستخدم هذه الطريقة كثيرًا للالتفاف حول الترجمات الديناميكية المفقودة.
بالنظر إلى القليل من التفكير ، يمكن التعبير عن كمية مدهشة من النص
بهذه الطريقة في القوالب. النمط الشائع هو أن يكون لديك مجموعة من الرسائل ،
ثم استخدم هذا مع ngFor و ngSwitch لقالب الرسائل ،
شيء من هذا القبيل:

ts

messsages = ['هذه هي الرسالة الأولى' ، 'هذه هي الرسالة الثانية']

لغة البرمجة


i18n = "firstMesssage"> هذه هي الرسالة الأولى
i18n = "secondMesssage"> هذه هي الرسالة الثانية

إنه مطول إلى حد ما - لكنه يعمل!

-
أنت تتلقى هذا لأنه تم ذكرك.
قم بالرد على هذا البريد الإلكتروني مباشرة ، وقم بعرضه على GitHub
https://github.com/angular/angular/issues/11405#issuecomment-415731284 ،
أو كتم الخيط
https://github.com/notifications/unsubscribe-auth/AGwM6jcWIpwtGxhkH1fwnVXNagRxmMnoks5uT-LxgaJpZM4J2pkr
.

إذا تم ذلك ، فلن يهم لأنه يتعين علينا انتظار اكتمال Ivy ، والذي من المقرر في Angular 7 (سبتمبر / أكتوبر 2018)

إنه الرائد أكتوبر. هل تعتقد أنه سيكون لدينا الميزات الجديدة بنهاية أكتوبر؟

lizzymendivil وفقًا لـ https://is-angular-ivy-ready.firebaseapp.com اكتمل 65 ٪ من Ivy ويبدو أنه من غير المحتمل أن يكتمل في غضون 30 يومًا فقط

نعم ، لن يتم الانتهاء من لبلاب في شهر واحد.

ocombe ، هل يمكنك قفل هذا حتى تتمكن فقط من نشر التحديثات. من المزعج بعض الشيء الحصول على جميع الإخطارات "متى يتم ذلك؟" تعليقات

ocombe يبدو أن Ivy الآن بنسبة 94 ٪ تقريبًا ، هل تعتقد أن هذا قد يكون جاهزًا بحلول نهاية العام؟

لا أعتقد ذلك. أن تكون الميزة جاهزة وخالية من الأخطاء (= قابلة للاستخدام) أمر مختلف تمامًا. نحن نعمل في الغالب على إصلاح الأشياء في الوقت الحالي.

ocombe هل يمكننا تصديق أن i18n أتى قبل الزاوية 8؟

لا أعتقد ذلك. أن تكون الميزة جاهزة وخالية من الأخطاء (= قابلة للاستخدام) أمر مختلف تمامًا. نحن نعمل في الغالب على إصلاح الأشياء في الوقت الحالي.

حسنًا ، شكرًا على الرد السريع ، أقدر ذلك كثيرًا.

أي تحديث ocombe عندما نتوقع (نهاية العام الذي أراه في التعليقات القليلة الأخيرة) يتوفر جزء "ترجمة الشفرة" جنبًا إلى جنب مع "ترجمة القوالب" لدعم I18N مع Angular؟ اعتقدنا أن club ngx-translate-polyfill لنفسه جنبًا إلى جنب مع ميزة Angular I18n ولكن يبدو أيضًا أن دعم xlf غير متاح لدمج ملف xlf الحالي باستخدام https://github.com/biesbjerg/ngx-translate-extract CLI .

شكرا !

تضمين التغريدة

نستخدم ngSwitch لقالب جميع الرسائل ، حتى نتمكن من إرفاق علامات i18n بها بشكل فردي.
إنه مطول إلى حد ما - لكنه يعمل!

شكرا على اقتراحك! يبدو أنه من الأسهل فهمه. سؤالي هو ، هل ما زلت تستخدم هذا التنفيذ في المواقف التي تحتوي فيها المصفوفة على "الكثير" من القيم ، مثل 10 أو أكثر؟ يبدو أن الشفرة ستصبح ضخمة جدًا.

لا أعرف ما إذا كان لدينا أي مع هذا العدد الكبير ، ولكن لم لا. إذا كانت الرسائل تستخدم عدة أماكن ، فإننا نصنع مكونات i18n صغيرة هي في الأساس مجرد علامات التبديل و i18n.

ديفيد

دن 23. يناير. 2019 ك. 19.24 سكريف أندرو بيسادا [email protected] :

تضمين التغريدة

نستخدم ngSwitch لقالب جميع الرسائل ، حتى نتمكن من إرفاق علامات i18n بها بشكل فردي.
إنه مطول إلى حد ما - لكنه يعمل!

شكرا على اقتراحك! يبدو أنه من الأسهل فهمه. سؤالي هو ، هل ما زلت تستخدم هذا التنفيذ في المواقف التي تحتوي فيها المصفوفة على "الكثير" من القيم ، مثل 10 أو أكثر؟ يبدو أن الشفرة ستصبح ضخمة جدًا.

-
أنت تتلقى هذا لأنه تم ذكرك.
قم بالرد على هذه الرسالة الإلكترونية مباشرةً ، أو اعرضها على GitHub ، أو قم بكتم صوت الموضوع.

كيفية استخدام i18n-polifills في فئات Validator. أنا غير قادر على استخدام رسالة المدقق السرية من خلال خدمة i18n.

// في المكونات
this.crForm = this.fb.group ({
اسم االمستخدم: ['']،
كلمة المرور الإلكترونية: ['']،
} ، {المدقق: جديد AccValidator (this.i18n) .validate ()}
) ؛

// المدقق

استيراد {AbstractControl، ValidationErrors، FormGroup، FormControl} من "@ angular / Forms" ؛
استيراد {I18n} من "@ ngx-translate / i18n-polyfill" ؛
فئة التصدير AccValidator {
المُنشئ (i18n: I18n)
{

}
validate() {       
    return (group: FormGroup): createAccountError => {
        if (group) {
            this.i18n("test");
}}}

الحصول على الخطأ أدناه

خطأ RROR: غير معلوم (في الوعد): خطأ في النوع: i18n ليس دالة
TypeError: i18n ليست دالة
في FormGroup.eval [كمدقق] (acc-validator.ts: 9)
في FormGroup.AbstractControl._runValidator (Forms.js: 3433)
في FormGroup.AbstractControl.updateValueAndValidity (Forms.js: 3387)
في FormGroup الجديد (Forms.js: 4326)
في FormBuilder.group (Forms.js: 7864)

تضمين التغريدة

كيفية استخدام i18n-polyfills مع ملفات const في ملفات ts

تصدير const glossayModel = () => [
{
العنوان: "بيانات الاختبار" ،
نشط: صحيح ،
بيانات: [

        [
            {
                title: 'test data',
                data: "test data."
            },
            {
                title: 'test data',
                data: "test data"
            },
            {
                title: 'test data',
                data: "test data"
            },
            {
                title: 'test data',
                data: "test data."
            },
            {
                title: 'Past Due',
                data: "test data."
            }

]]}] ؛

{VAR_SELECT، select، Medical {Medical} Dental {Dental} Medical & Dental {Medical & Dental} Catastrophic & Dental {Catastrophic & Dental} Carastrophic {Catastrophic}}
{VAR_SELECT، select، Medical {Medical} Dental {Dental} Medical ### & Dental {Medical y Dental}
### كارثية وطب الأسنان {كارثي وأسنان} كارثي {كارثي}}

عندما أستخدم تعبير ICU بحرف خاص ، لا يتم تحويله.

ocombe كيف تتعامل مع فتات الخبز باستخدام i18n-polyfills؟

مسارات التصدير المستمر: المسارات = [
{
طريق: ''،
المكون: HomeComponent ،
بيانات: {
العنوان: "الصفحة الرئيسية" ،
مسار التنقل: "الصفحة الرئيسية"
}
}
]

تضمين التغريدة

كيفية استخدام i18n-polyfills مع ملفات const في ملفات ts

تصدير const glossayModel = () => [
{
العنوان: "بيانات الاختبار" ،
نشط: صحيح ،
بيانات: [

        [
            {
                title: 'test data',
                data: "test data."
            },
            {
                title: 'test data',
                data: "test data"
            },
            {
                title: 'test data',
                data: "test data"
            },
            {
                title: 'test data',
                data: "test data."
            },
            {
                title: 'Past Due',
                data: "test data."
            }

]]}] ؛

يمكنك استخدام مثل هذا
{
البيانات: "بيانات الاختبار" ،
العنوان: this.i18n ({القيمة: 'الاسم' ، المعرف: 'الاسم'}) ،
}
حقن I18n polyfill في مُنشئ مكون مثل هذا
خاص i18n: I18n
عند استخدام الترجمات في ملف ts ، تحتاج إلى استخدام ngx-extractor و xliffmerge لترجمة ملفات ts. https://www.npmjs.com/package/ngx-i18nsupport

تضمين التغريدة
انها لا تعمل ، لا تحصل على البيانات في ملف xlf.

هنا نص الترجمة الخاص بي:
"translate-i18n": "ng xi18n --output-path locale && ngx-extractor -i src/**/*.ts projects/**/*.ts -f xlf -o src/locale/messages.xlf && xliffmerge --profile xliffmerge.json fi en",

وهنا xliffmerge.json

{
  "xliffmergeOptions": {
    "srcDir": "src/locale",
    "genDir": "src/locale",
    "i18nFile": "messages.xlf",
    "defaultLanguage": "en",
    "useSourceAsTarget": true
  }
}

تضمين التغريدة
نعم أنا باستخدام نفس التكوين ، وقادر على استخراج الرسائل .ts في ملف xlf.

ولكن لدي في ملفات .ts مختلفة

تصدير const glossayModel = () => [
{
}

أقوم بالاستيراد في المكون ، عندما أحاول استخدام i18n مع const ، لا يتم استخراج القيم.

ماذا لو كنت تستخدم قيم ثابتة مثل المزود.

{
    provide: glossayModel,
    useFactory: () => glossayModel()
}

قد يتم كسر الكود ولكن ربما تحصل على نقطة.

كيفية ترجمة فتات الخبز

مسارات const: المسارات = [
{
المسار: "./enroll-new.component"،
المكون: EnrollNewComponent ،
بيانات: {
مسار التنقل: "التسجيل"
} ،
}
]

هل يمكن للأشخاص التوقف عن استخدام هذا الموضوع كخيط دعم لـ i18n-polyfill أو مشكلات أخرى؟ إذا كان لديك سؤال بخصوص i18n-polyfill ، فانتقل إلى طرح مشكلة في هذا الريبو.
ocombe ربما يمكنك قفل هذا الموضوع؟ يجب تغطية كل شيء مهم إلى حد كبير.
ما هو الإصدار الزاوي الذي تخطط لإطلاقه دعم i18n المذكور في هذا الموضوع؟

نعم ، مغلق الآن.
نحن نعمل بجد لجعل Ivy متاحًا مع الإصدار 8 كإصدار تجريبي للاشتراك. سيكون وقت التشغيل i18n قابلاً للاستخدام مع إغلاق google (ما تستخدمه Google داخليًا) مما سيسمح لنا بتصحيحه (إنه تغيير كبير جدًا). بالنسبة لأي شخص آخر ، ستتمكن من اختبار Ivy باستخدام i18n ولكن لن تتمكن من تحميل الترجمات. سيتم تشغيل التطبيق باللغة الأصلية المستخدمة في رمز التطبيق.
تقوم خدمة وقت التشغيل المطلوبة بالفعل للترجمة بإرجاع النص غير المترجم حاليًا. نظرًا لأننا نعمل جميعًا على إصلاح الأخطاء باستخدام الكود الحالي ، فستقتصر الميزات الجديدة على ما بعد الإصدار. سنعمل عليه بمجرد إصدار v8 ، يجب أن تكون مهمتي الأولى.
سأضيف تحديثًا وأفتح هذا الموضوع بمجرد أن يكون لدينا بعض الأخبار.

لما يستحق ، يمكن استخدام علامة $localize الجديدة التي نعمل عليها بشكل برمجي.

على سبيل المثال

const name = 'World';
$localize `Hello ${name}:name!`;

وبعد ذلك ستكون قادرًا على توفير ترجمات لـ Hello {$name}! يمكن استبدالها في وقت الترجمة (أو وقت التشغيل).

هذا متاح الآن (إذا لم يكن موثقا).