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은 이것이 구현될 때까지 사용할 준비가 되지 않았습니다.
예를 들어 코드에서 번역된 유효성 검사 메시지를 설정할 수 없습니다.

예, 여기에서 동일합니다. 저는 OOTB 모듈을 사용하는 것을 선호하기 때문에 ng2-translate에서 Angular2 i18n으로 전환했으며 번역을 추출하는 것이 훨씬 쉽습니다(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 코드를 처리하므로 (string-) 속성에 대해 @i18n() 와 같은 데코레이터를 구현하지 않는 이유는 무엇입니까? 그런 다음 @Input() 가 단방향 데이터 바인딩과 함께 사용되는 것처럼 번역된 값으로 채워질 수 있습니다.
번역되지 않은 값을 코드에서 쉽게 추출할 수 없는 경우 다음과 같이 인수에 넣습니다.

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

번역 대상이 없을 때 소스를 속성에 제공합니다.

이것은 전체 국제화 주기인 IMO에서 필수 항목입니다.

내 가게에서 우리는 번역자를 위한 사전 파일에 넣을 표시된 텍스트를 찾는 모든 유형의 소스 파일을 크롤링하는 "ng-xi18n - like" 도구(xgettext의 확장자)에 익숙합니다.

나는 HTML 템플릿의 깨끗하고 쉬운 i18n 마크업을 좋아하고 Typescript 코드에서도 같은 것을 기대했습니다.

@vicb 귀하의 사용 사례 외에도 TS 코드에서 보간된 문자열의 현지화를 지원할 가능성에 대해 생각하고 있습니다. 그러나 이러한 시나리오를 지원하려면 TS 코드를 다시 작성해야 할 수 있습니다. 유효한 접근 방식이 될까요?

이것은 Angular 2가 제공하는 번역에 대한 기본 접근 방식을 사용하지 못하게 하는 주요 기능입니다. HTML에 저장되지 않은 일부 메타데이터에서 키를 가져오는 메타데이터 기반 구성 요소가 많이 있습니다. 파이프를 통해 또는 사용 가능한 TRANSLATIONS에 대해 프로그래밍 방식으로 번역할 수 있다면 이러한 구성 요소가 적절한 문자열을 표시하도록 할 수 있습니다.

그 동안 우리는 이러한 제한 때문에 ng-translate와 같은 것으로 제한됩니다.

이 문제를 해결하는 방법은 내 응용 프로그램 전체에서 사용되는 서비스에 빈 'lang' 개체를 추가하는 것입니다. 그런 다음 div의 모든 범위를 읽고 해당 개체에 값을 저장하는 지시문을 적용합니다. 숨겨진 속성이 있는 페이지 하단의 템플릿에 모든 문자열을 배치합니다. 그런 다음 템플릿 또는 구성 요소에서 문자열에 연결할 수 있습니다. 보기 흉하고 동일한 ID로 항목을 쉽게 덮어쓸 수 있습니다. 하지만 없는 것보다는 낫습니다.

서비스

@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 루프에서는 선언하지 않아야 합니다.

키를 수동으로 추가하는 것은 효과가 있지만 비실용적입니다. 제 경우에는 API에서 번역이 필요한 수백 개의 텍스트 키를 받았습니다.

코드를 실행하고 소스를 가져와 파일에 복사할 수 있습니다. x18n 파일의 생성은 정적 파일을 기반으로 합니다.

4.0.0-beta 를 사용하면 i18n 에 ID를 할당할 수 있습니다(예: 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 of 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이 없어도 됩니다.

참고: 4.0.0-베타의 현재 @angular/compiler-cli NPM 패키지에는 @angular/tsc-wrapped 의 잘못된 종속성 버전이 있습니다. 0.4.2를 가리키며 0.5.0이어야 합니다. @vicb 이거 쉽게 고쳐지나요? 아니면 다음 릴리스를 기다려야 합니까?

@fredrikredflag 굉장합니다! 그리고 AOT는 어떻습니까?

@ghidoz AOT는 또 다른 이야기입니다. 우리가 하고 싶은 것은 모든 번역을 미리 컴파일하여 키로 얻을 수 있도록 하는 것입니다. 그러나 ngc 는 모든 i18n 를 올바른 번역으로 대체하므로 이를 활용할 수 없습니다. ngc 에서 구문 분석된 번역을 포함하는 노출된 옵션/속성을 찾을 수 없습니다. TRANSLATION 토큰에 여전히 제공하는 xlt 파일을 가져와서 JIT와 동일한 동적 접근 방식을 사용할 수 있습니다. 그러나 이것은 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 구조에 영향을 줄 수 없기 때문에 런타임 번역을 지원할 수 있습니다. 단일 버전의 바이너리가 있고 런타임에 확인이 발생합니다.
• 오늘날 템플릿에 대해 수행하는 것처럼 정적 번역을 지원할 수도 있습니다. 문자열은 컴파일 시간에 대체되고 성능은 더 좋지만 로케일당 하나의 앱 버전,
• 나중에 템플릿에서 __(...) 를 지원할 수 있습니다.
• 이것은 2.3에서 사용 가능한 TS 변환기를 통해 구현됩니다. 이전에 프로토타입을 가질 수 있었을 것입니다.

/cc @ocombe

__() 는 아직 이름이 없는 메서드에 대한 것입니다. (그리고 메서드는 실제로 __ 가 아니겠죠?)

클래스에서 사용할 수 있는 정적 번역에 대한 좋은 아이디어이며 구현하기가 매우 간단하다고 생각합니다.

아니요 __() 는 이름이 마음에 들지 않습니다 :)

번역 프레임워크에서 일반적으로 사용되지만 다른 이름을 선호하는 경우 import {__ as olivier} from '@angular/core' 를 사용할 수 있습니다!

eeeeeeeh 자체 설명이 아닙니다. :D
그것은 매우 사적인 기능처럼 보입니다.

저도 ___ 메서드 이름이 마음에 들지 않습니다. :) 서비스가 될 거라고 상상했나요?
어쨌든 발전하는 모습이 보기 좋네요 👍

좋아요 __()! :D 매우 gettext-y이며 짧습니다.

JS 세계에서는 @ocombes ng2-translate에 대한 경험만 있습니다. 여기서 this._translateService.instant()로 모든 텍스트를 표시하면 여기에 제안된 것처럼 짧은 대안에 비해 코드를 읽기가 다소 어려워집니다.

ng2 번역 서비스의 이름을 __ 로 바꾸는 것을 막을 수는 없습니다. :)

사실, 나는 DI 서비스 메소드를 간단한 함수로 어떻게 래핑하는지 전혀 모릅니다. - 어쨌든, 신경쓰지 마세요. 그것은 이 문제의 범위를 벗어납니다:-) 제 의견은 __를 사용하는 것에 대한 +1일 뿐입니다. 적어도 PHP 세계에서는 다른 번역 프레임워크를 사용해 본 적이 있습니다.

좋아, 아마도 ___가 괜찮고 "this.translationService.getTranslation()"보다 훨씬 짧습니다.
예, 원하는 경우 이름을 변경할 수 있습니다.

__(...) i18n(...) $는 어떻습니까?

이름에 대한 논쟁을 중단하십시오. 그게 요점이 아닙니다. 감사 해요.

monday = __('Monday', {description: 'First day of the week', id: 'firstDatOfWeek'}); 가 있는 @vicb 는 id로 해결할 수 있습니까? 예:

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

또한 Monday 는 정의된 클래스에 국한되거나 어디에서나 해결할 수 있습니까? "닫다", "열다" 등과 같은 일반적인 번역을 생각하고 있습니다.

공식 릴리스가 지원할 때까지 AOT와 함께 사용하도록 권장하는 현재 가장 좋은 해결 방법이 무엇인지 궁금합니다.

문안 인사,
션

Angular 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>

해결 방법이지만 여전히 지금까지 가장 깨끗한 방법이라고 생각합니다. ts title 에 액세스할 수 있습니다.

저는 이 기능에 대한 작업을 시작하고 있습니다. 곧 디자인 문서가 나올 것으로 기대합니다 :-)

이것은 가장 기대되는 기능이 될 것입니다

좋은 소식이네요. @ocombe 감사합니다.

디자인 문서는 https://goo.gl/jQ6tQf 에서 볼 수 있습니다.
모든 피드백을 감사합니다. 감사합니다.

달콤한, 최대한 빨리 읽을 것입니다!

@ocombe 감사합니다

문서를 읽었습니다. 아름다운 요약.

ts 파일에서 문자열을 추출할 수 있다는 것은 정말 멋진 일입니다.

Angular4에서 Typescript 업그레이드를 언제 사용할 수 있는지 잘 모르겠습니다.

거의 모든 사람이 이 제한에 부딪쳤기 때문에 이 기능은 이미 몇 개월 동안 사용할 수 있어야 했으며 적어도 3/6개월이 더 지나기 전에는 이 솔루션을 사용할 수 없게 됩니다.

템플릿에 Angular i18n을 사용하는 동안 컨트롤러에서 번역을 관리하기 위해 ngx-translate를 사용하는 사람은 지금 저만이 아닐 수도 있습니다.

모든 것을 i18n에 병합하려는 목표는 분명히 훌륭합니다.

그러나 각도 프레임워크에서 i18n을 구현하는 방법을 이해한다는 측면에서 단순화를 제외하고 이 접근 방식이 현재의 ngx-translate 구현과 비교하여 실제로 성능을 향상시킬까요?

내가 지금 이해하는 바에 따르면 유일한 보너스는 컨트롤러에서 문자열을 추출할 수 있다는 것입니다.

또한 현재 큰 제한 사항은 복수화입니다. 전체 업그레이드를 릴리스할 때 제대로 작동하는지 확인하십시오. xliff와 xmb가 모두 이것을 올바르게 처리하지 못하는 i18n 관련 티켓을 많이 읽었습니다. 이것은 작동하는 솔루션을 제공하기 위해 ngx-translate로 다시 전환해야 하는 또 하나의 경우입니다.

@ocombe 상세한 설계 문서에 감사드립니다. 이것은 이 기능 요청에 대한 정말 좋은 솔루션인 것 같습니다. 현재 디자인은 내가 해결하려는 사용 사례를 다루고 있습니다.

한 가지 질문: 설계는 JIT 모드용 I18N 서비스와 AOT 모드용 TS 2.2.x Transformer에 대해 설명합니다. 변환기가 서비스 메소드에 대한 호출을 정적 변환으로 대체하고 I18N 서비스에 대한 나머지 참조를 모두 제거한다고 가정하는 것이 맞습니까?

@Thommas Angular 4 는 TypeScript 2.1(즉, 업그레이드 해야 함)을 사용하지만 실제로는 Angular 2 또는 4에서 최신 버전의 TypeScript(예: 2.2.1)를 사용할 수 있습니다.

ngx-translate에 대한 성능 향상 측면에서 AOT를 사용하는지 여부에 따라 다릅니다. AOT를 사용하면 이득이지만 차이를 느끼지 못할 것입니다. JIT(AOT 없음)에서는 이득이 없습니다(실제로 get 옵저버블 또는 동기식 instant 메서드를 사용하는 경우 옵저버블 비용이 간단한 함수 호출보다 비쌉니다).
여기 코드에서 i18n에 대해 이야기하고 있습니다. 템플릿에 대해 이야기하고 있다면 바인딩을 사용하지 않기 때문에 Angular i18n(AOT 및 JIT에서)을 사용하는 경우 실제로 눈에 보이는 이득이 있습니다. 더 많은 번역을 사용할수록 더 많은 것을 얻을 수 있습니다.

복수화가 템플릿에 대해 수행하는 것과 정확히 동일하게 작동하는지 확인하겠습니다. 지금 템플릿에 문제가 있습니까?

@schmuli Angular가 코드를 대체할 수 있는 유일한 시간은 AOT를 사용할 때입니다. 그렇지 않으면 서비스 호출이 코드에서 동일하게 유지됩니다.
그러나 AOT를 사용하는 경우 서비스 호출은 정적 변환으로 대체됩니다(사용할 수 있는 변수만 동적 상태로 유지됨). I18n 서비스에 대한 참조를 제거할지 여부는 확실하지 않습니다. I18n 서비스는 향후 다른 용도로 사용될 수 있기 때문에 코드 작성을 시작하면 변환기로 무엇이 가능한지 확인해야 할 것입니다. 이것이 문제가 될 사용 사례에 대해 생각하고 있습니까?

@ocombe 사용되지 않을 추가 DI 주입을 고려하지 않는 한 코드를 남겨두는 것이 문제가 되는 유스 케이스를 생각할 수 없습니다(이것이 실제 문제입니까?).

앞으로 서비스가 다른 용도로 사용될 수 있다는 글과 사용자의 코드를 변경하여 오류가 발생할 가능성을 고려하면 코드를 아예 삭제하지 않는 것이 더 나을 것 같습니다.

서비스를 사용하여 AOT에서 현재 로케일을 가져오는 것이 유용할 수 있습니다. 예를 들어 여러 언어로 텍스트를 반환할 수 있는 서버가 있는 경우를 생각해 보십시오. 따라서 요청에 포함할 현재 로캘이 필요합니다. 그러나 항상 임시로 번역된 문자열을 해결 방법으로 사용할 수 있습니다.

@diego0020 이미 로케일을 얻을 수 있습니다. 코어에서 LOCALE_ID 를 주입하기만 하면 됩니다.

@ocombe 복수화는 xliff로 구현되지 않으며 Google 외부의 누구도 xmb와 함께 사용하는 방법에 대한 단서가 없습니다. 참조: https://github.com/angular/angular/issues/13780

어쨌든, 지금 당장 우리의 i18n 구현을 차단하는 것은 없습니다. ngx-translate with pluralization pipe는 지금 당장은 할 것입니다. 바라건대 모든 것이 NG4에서 더 좋아 보이고 문서에 개선 사항이 반영될 것입니다. 감사 해요.

@Thommas ICU with xliff는 곧 수정될 예정입니다: https://github.com/angular/angular/pull/15068 그리고 사용법을 알고 싶다면 https://angular.io/docs/ 문서에 있습니다.

죄송합니다. ETA가 있습니까? ng4.0.0 릴리스에서 사용할 수 있다고 들었지만 아니요! 감사 해요

참조 @ocombe

우리는 여전히 디자인 작업을 하고 있습니다. 고려해야 할 예기치 않은 사항이 많이 있습니다(예: 도서관이 자체 번역을 제공할 수 있는 방법), ...
이것은 4.2에서 예상되지만 보장되지는 않습니다.

ok 감사 합니다 @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> - 좋습니다.

@royiHalp
감사 해요

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>

다행히 AoT를 사용하여 프로덕션에서 훌륭하게 작동하도록 내 miniApp에 약간의 문자열만 필요합니다.
다시 한번 감사합니다!!!

P/S: Martin Roob의 xliffmerge 도구는 현재 반드시 사용해야 하며 그의 TinyTranslator 도 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 대략적인 추정은 언제 가능합니까?

좋은 기능 btw :)

컴파일러가 변경될 때까지 보류되므로 4.2가 아니라 4.3에도 적용되기를 희망합니다.

누구든지 다음 예에서 [title]과 같이 param 값에서 i18n을 구현하는 방법을 알고 있습니다.
즉, HELLO라는 단어에 번역을 추가하십시오.

문안 인사

션

HELLO가 HTML 템플릿에 입력하는 문자열일 경우 다음을 수행할 수 있습니다.
```html

````
문서에 이에 대한 예가 있습니다. 여기를 보세요: https://angular.io/docs/ts/latest/cookbook/i18n.html#! #translate-attributes

구성 요소의 문자열 속성에 바인딩해야 하는 경우 이 기능을 기다리거나 사용자 정의 번역 방식을 구현해야 합니다(내가 아는 한).

@오콤베

우리는 여전히 디자인 작업을 하고 있습니다. 고려해야 할 예기치 않은 사항이 많이 있습니다(예: 도서관이 자체 번역을 제공할 수 있는 방법), ...

이것은 매우 중요합니다. 이것도 이 기능의 일부이길 바랍니다. 현재로서는 타사 라이브러리가 귀하의 응용 프로그램에 번역을 제공할 수 있는 방법을 알지 못하기 때문입니다. 빌드하는 동안 1개의 XLIFF 파일만 지정할 수 있으며, 언어를 번역할 수 있도록 라이브러리를 미리 빌드해야 하는 것 같습니다.

네 저도 기다리고 있습니다! 이것은 영어를 사용하지 않는 청중을 대상으로 하는 프로젝트에 매우 중요합니다!

그것은 확실히 우리가 지원하고 싶은 것입니다. 팀은 우리가 그렇게 할 수 있도록 컴파일러를 리팩토링하는 작업을 하고 있습니다 :-)

대상이 될 버전에 대한 예상이 있습니까? 나는 그것이 약 4.3 일지도 모른다는 것을 어딘가에서 읽었다.

필요한 리팩토링(및 주요 변경 사항) 때문에 v5 이전에는 없을 것입니다.

와아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아ㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏ악 언어. v5가 언제인지 궁금합니다. 감사 해요

@오콤베

@istiti 보장된 날짜가 아니라고 하더군요 ;-)
릴리스 일정은 다음과 같습니다. https://github.com/angular/angular/blob/master/docs/RELEASE_SCHEDULE.md
v5의 최종 릴리스는 2017‑09‑18이지만 그 전에 베타 및 RC가 있습니다.

각 구성 요소에 대해 하나의 로케일 파일을 만드는 변경 사항이 있습니까? messages.xlf 덩어리를 만드는 것을 의미합니다. 예: messages.{component}.{locale}.xlf 및 예를 들어 기본 언어의 경우 messages.{component}.xlf .

아직

@ocombe 빌드 시간으로 인해 손상이 엄격하게 최소화됩니다.

혼란스러워요... 이 변경요청/변경이 공식화 되는 건가요?
여기에 동일한 문제가 있지만 번역은 템플릿에만 적용되지 않습니다.
redux, 사용자 정의 treeview 구성 요소 등 ... 모두 템플릿이 아닌 코드의 자바 스크립트 개체에서 생성됨

공식적이며 곧 출시될 예정이지만 먼저 컴파일러를 크게 변경해야 했기 때문에 4.3에서는 준비되지 않았습니다.

이 기능을 사용할 수 있거나 계획 중인 정확한 버전이 무엇인지 알고 있습니까? 4.3.1, 4.3.2 ... 4.3.X ?

4.x 브랜치에는 더 이상 메이저/마이너 버전이 없습니다(패치만: https://github.com/angular/angular/blob/master/docs/RELEASE_SCHEDULE.md). 즉, 5.x용이 됩니다. , 어느 것이 확실하지 않습니다.

이것이 여전히 5.x에 포함될 것으로 예상됩니까? 베타에서는 안보이네요. 감사 해요

v5.x가 아닌 v50.x에 있을 수 있습니다 😂

5.x 예, 하지만 5.0에는 없을 것입니다.

르쥬. 3 août 2017 à 12:56, vltr [email protected] a écrit :

v5.x가 아닌 v50.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 ... 템플릿 외부의 문자열에 대한 솔루션의 개념을 설명하는 디자인 문서가 있습니까? 우리는 그것을 아는 것이 좋을 프로젝트 개발 단계에 있으므로 임시 솔루션을 어떻게든 준비할 수 있고 나중에 최종 Angular 구문으로 전환하는 것이 훨씬 더 쉬울 것입니다.

우리는 디자인 문서를 가지고 있었지만 그것은 컴파일러의 이전 버전을 기반으로 했고 아마도 우리가 끝내게 될 구현은 아닐 것입니다. 새로운 구현에 대한 더 나은 아이디어가 나오면 새로운 공공 디자인 문서를 작성할 것입니다.

@ocombe 이 기능을 +1해야 합니다. 지금 당장 필요합니다 lol :+1: 놀라운 도구를 만들어 주셔서 감사합니다! :)

현재 설계 문서를 이해하고 있으므로 AOT 라이브러리 작성자는 이 라이브러리를 사용하는 다양한 응용 프로그램에 필요한 모든 언어에 대한 번역을 제공해야 합니다.
내가 이것을 올바르게 이해했는가?

이것은 좋은 지적입니다 @gms1.
나는 이것을 여기에서 시험했다.
라이브러리 작성자는 i18n 태그만 추가하면 됩니다.
라이브러리를 " ngfactories "로 컴파일해서는 안 됩니다(ng-conf 2017에서 Jason Aden의 연설 참조). 그러면 번역 태그가 대체되지 않습니다. 이렇게 하면 ng xi18n 명령을 실행할 때 node_modules 폴더의 파일에 대한 xliff의 번역도 얻을 수 있습니다.

따라서 번역을 제공할 필요는 없지만 유용한 의미를 가진 i18n 태그를 추가하면 됩니다.

디자인 문서에서 인용:

AOT의 경우 소스 코드는 서비스 호출을 정적 번역으로 대체하도록 변환됩니다. 이를 위해 TypeScript 변환기를 사용할 것입니다.

그렇다면 Angular(AOT) 라이브러리가 일반적으로 트랜스파일 형식으로 출판된다면 이것은 무엇을 의미할까요? 이 문서에서 .metadata.json에 대한 참조를 찾지 못했습니다.

라이브러리를 최종 코드로 컴파일해서는 안 되며 개발자가 코드를 사용하여 컴파일할 수 있도록 준비해야 합니다. @jasonaden 이 여기에서 언급한 내용을 참조하세요. 이것은 또한 i18n 태그를 추가하여 라이브러리를 번역 가능하게 만들 수 있음을 의미합니다.

@gms1 내가 말했듯이 :

우리는 디자인 문서를 가지고 있었지만 그것은 컴파일러의 이전 버전을 기반으로 했고 아마도 우리가 끝내게 될 구현은 아닐 것입니다.

그리고 AOT 컴파일러는 v5에 대해 광범위하게 변경되고 있으므로 라이브러리에서 "aot-ready" 코드를 게시하는 것이 더 쉬워야 합니다.
i18n의 경우 이를 최대한 쉽고 유연하게 만들고자 합니다. 라이브러리는 사용할 수 있는 번역 파일을 게시할 수 있지만 원하는 경우 재정의할 수도 있고 다음과 같이 제공할 수 있어야 합니다. 라이브러리가 기본적으로 지원하지 않는 경우 추가 언어

이 설명에 대해 @ocombe 에게 감사드립니다!

@ocombe 이것은 ngx-translate의 기능을 각도 자체에서 사용할 수 있다는 것을 의미합니까?

@montreal91 ngx-translate의 어떤 부분도 Angular로 구현될 수 없습니다. 제 lib는 매우 순진한 접근 방식을 가지고 있으며 "대부분" 작동하지만 프레임워크에서 훨씬 더 효율적이기를 원합니다.
즉, angular는 유사한 기능을 제공합니다(최종 구현이 다를지라도).

이것은 (https://github.com/PointInside/ng2-toastr) 기반의 UI 알림 시스템에서 작업하는 동안의 접근 방식(FLUX)입니다. 문제는 알림 내용이 Angular i18n 시스템(xi18n)에서 관리할 템플릿이 아닌 서비스 호출에 정의되어 있다는 것입니다.

내가 원하는 것은 아니지만 _working_ 솔루션입니다. 다음 코드 조각에서 아이디어를 _추출_할 수 있습니다. 도움이 되길 바랍니다 :)

어딘가에

// 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");

알림 구성 요소.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;
            }
        }
    }
}

알림 구성 요소.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 모듈의 변경 사항이 언제 통합됩니까?

이 기능은 앵귤러 컴파일러의 변경 사항에 따라 달라지는 것처럼 보이지만 컴파일러를 담당하는 팀은 관심이 적은 것 같습니다. 작업이나 PR 또는 커밋처럼 보이지 않습니다:- (. 죄송합니다. 하지만 다른 모든 번역 프레임워크에 있는 매우 기본적인 기능을 설명하는 이 기능 요청은 이제 1년이 넘었습니다. 이 필수 기능이 도착하기를 바랍니다. 적어도 5.x에서는...

얘들아 침착해라 AOT 컴파일러에 구현하는 것은 어리석은 일이 아닙니다. @ocombe 는 다음과 같이 말했습니다.

"아마도 5.x에 있을 것입니다. @vicb 는 마침내 이것을 가능하게 할 컴파일러에 대한 마지막 변경 작업을 하고 있습니다."

예, 우리는 지금 첫 번째 단계인 런타임 i18n을 작업 중입니다.
런타임 i18n은 다음을 의미합니다. 모든 언어에 대한 하나의 번들, AOT 컴파일 라이브러리는 i18n을 사용할 수 있으며 나중에 런타임에 언어를 변경할 수 있습니다. 그것은 또한 우리가 런타임에 번역을 할 수 있다는 것을 의미합니다. 이것은 코드 내부의 번역에 필요합니다(왜냐하면 번역을 위한 런타임 파서가 필요하기 때문입니다...).
이것이 완료되면 다음 우선 순위는 코드 내부의 번역이 될 것입니다.

그러나 typescript 변환기를 사용하도록 컴파일러를 변경하기 전에는 런타임 i18n을 수행할 수 없었습니다(5.0에서 수행됨).

어떤 5.x 버전에 어떤 i18n이 개선될지 아십니까? 5.0.0 자체와 함께 출시되는 것이 있습니까?

5.0:

• intl API를 사용하지 않는 새로운 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을 팔로우할 수 있음).

조금 늦었지만 TS 파일에서 i18n 지원을 고려하는 것만으로도 주석 구문에 대해 생각하지 않는 이유는 무엇입니까? (누군가가 위에서도 언급한 것을 발견했습니다)

예는 다음과 같습니다.
@i18n (id='message1')
message1 = "번역해야 할 메시지입니다.";

@i18n (id='동적 메시지')
dynamicMessage = "이것은 {0}이(가) 포함된 동적 메시지입니다.";

dynamicMessage에 대한 주석을 사용하면 이름이 format 인 이 문자열 인스턴스에 주석을 통해 함수를 주입할 수 있으며 다음과 같이 사용할 수 있습니다.
var finalMessage = dynamicMessage.format('값1')

명명된 매개변수 등을 처리하는 데 비슷한 접근 방식이 가능합니다.

좋은 개발자 경험을 만드는 방법에 대한 질문이 아닌 것 같습니다. 컴파일에 대한 질문입니다.

또한 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에서 풀타임으로 일하는 사람(Olivier Combe)이 있습니다. AOT는 매우 특별하며 이 문제를 가능에 가깝게 만들기까지 많은 작업을 수행해야 했습니다. 곧 동적 번역이 가능해집니다. 더 이상 각 언어를 별도로 구축할 필요가 없습니다! 이 작업이 완료되면 나중에 코드 내에서 번역(이 문제)을 갖게 됩니다. 그는 이 문제가 해결될 때까지 앞으로 반년이 걸릴 것이라고 말했다.

관심이 있으시면 07.11.17의 Angular Connect에서 Angular에서 i18n의 현재와 미래에 대한 연설을 확인하세요. https://youtu.be/DWet6RvhHWI?t=21m12s

이것은 typescript 태그가 지정된 템플릿 문자열에 대한 좋은 사용 사례처럼 보입니다...

이것은 일반적으로 냄새가납니다. 나는 이 스레드를 매달 한 번 방문하여 진행 상황을 확인하고 기대치가 낮아져 실망을 멈췄습니다. 개발자가 원하는 유일한 것은 템플릿에서와 같이 코드에서 문자열 번역에 대해 동일한 옵션을 갖는 것입니다. 내 코드는 이러한 기능 부족으로 인해 숨겨진 번역된 템플릿 문자열로 가득 차 있습니다. 이것이 결국 서비스 또는 주석으로 수행되는지 여부는 관련이 없으며 추가로 밀리초가 소요되는지 여부는 중요하지 않습니다. 코드에서 문자열을 선택할 때 변경 사항이 있는지 이미 보고 있습니다 . 유일한 요구 사항은 코드가 구문 분석되고 관련 문자열이 내 템플릿 기반 번역과 동일한 형식의 동일한 파일로 끝나는 것입니다.

@eliasre 코드 번역이 급한 경우 https://github.com/ngx-translate/i18n-polyfill 을 시도할 수 있습니다.
그것이 같을 것이라는 약속은 없지만 실제로는 아마도 다를 것입니다(사용하기 쉽기 때문에), 지금 가능한 것에 제한이 있습니다... 그리고 사용할 앱에 ~80ko를 추가할 것입니다 그 라이브러리

기다리지 않으려면 ngx-translate를 사용할 수 있습니다.

@ocombe 사용할 플러그인이나 프레임워크에 대한 결정을 기다릴 때 개발 일정에 따라 추적하고 계획할 수 있도록 진행 상황에 대한 업데이트를 제공해 주시겠습니까? 그것은 매우 도움이되고 감사 할 것입니다

@eliasre 구글이 한번에 좋은 솔루션을 만들고 싶다는 생각이 듭니다. 앞으로도 변함없이. 우리가 생각하는 것보다 훨씬 더 오래 걸린다는 데 동의합니다.

가난한 @ocombe 를 괴롭히지 마십시오. 그는 매우 열심히 일하고 있습니다!
계속 해! :)

제가 이 기능을 하는 사람이 아니고 휴일이라 더 알게 되는대로 알려드리겠습니다

@ocombe 감사합니다

@ocombe 감사합니다. 업데이트가 있으면 여기에서 크게 감사하겠습니다. 나는 지난 몇 달 동안 런타임 i18n을 간절히 기다렸고 마지막 빌드 ETA는 5.2였습니다. 업데이트된 ETA를 여기에서 알려 주시겠습니까?

끈질기게 해서 미안하지만 20개 언어로 빌드하는 것은 현재로서는 엄청나게 느립니다.

Angular 5.2가 나왔고 불행히도 i18n 과 관련된 것을 찾을 수 없었습니다. i18n에 대한 귀하의 노력에 대해 많이 & thx 많이!

@ocombe 는 우리가 여기서 기다리고 있는 사람이 아닙니다... 이 댓글의 YouTube 링크를 확인하세요: https://github.com/angular/angular/issues/11405#issuecomment -343933617

계획은 지속적으로 발전하고 있습니다. 내가 가능한 출시 날짜를 줄 때마다 다른 것이 우선 순위를 얻거나 필수가 되어 날짜를 다시 한 번 변경합니다. 이 기능을 기다려주신 여러분께 얼마나 실망스러운지 잘 알고 있으며 우선 순위를 높이기 위해 최선을 다하고 있습니다.
내일 i18n 백로그/계획에 대해 논의하기 위한 회의가 있습니다. 새로운 소식이 있으면 알려 드리겠습니다.

@ocombe 이번달 에 i18n 출시되면 수제맥주 24팩 사줄게

Angular Elements 및 라이브러리 지원이 무엇을 하는지 묻는다면 독일 맥주 24병과 24병을 추가하겠습니다. 무슨 일이 일어나고 있는지 정보를 얻지 못하는 젠장.

@ocombe 값비싼 수제 맥주 72병을 구입하고 개발 커뮤니티를 행복하게 할 수 있는 일생에 한 번뿐인 드문 기회입니다. 당신이 이것을 성취한다면 우리는 우리의 약속을 이행할 것입니다 친구.

@MickL Angualr Elments, 내가 이해하는 것처럼 SPA가 아닌 페이지를 빌드하고 각도 구성 요소를 기본 요소(자체 위젯으로도 사용)로 사용할 수 있습니다.

네 알겠습니다. 이것은 모두가 기다리고 있는 2개의 다른 기능이지만 상태가 무엇이며 언제 예상할 수 있는지는 아무도 모릅니다...

누군가가 마지막 27병의 맥주를 추가하겠다고 약속한다면, 우리는 그것들을 셀 수 있습니다!
http://www.99-bottles-of-beer.net/language-javascript-1948.html

@ocombe 를 추가하겠습니다 : 좋아하는 브랜드 이름을 지정하세요 :D

편집 : 누군가 beerbounty :p라는 eth bounty와 유사한 서비스를 만듭니다.

약속대로 약간의 업데이트: 우리는 여전히 v6에서 런타임 i18n을 출시하는 것을 목표로 하고 있습니다. 그것은 짧을 것이고 아마도 마지막 릴리스 중 하나에 추가될 것이며 플래그 뒤에 있을 것입니다.
런타임 i18n은 코드 번역과 함께 제공되어야 합니다. 왜냐하면 그것이 어쨌든 템플릿에서도 작동하는 방식이기 때문입니다(동일한 메커니즘을 사용해야 함).
다만, 서비스가 100% 준비될지는 미지수이며, 출시 직후 중단되지 않도록 하는 것이 옳은 선택이라고 판단되면 연기할 수 있습니다. 그러나 그것은 어떤 경우에도 런타임 i18n을 따를 것이며(이것이 우리의 로드맵입니다) 플래그 뒤에 있을 것이고 어쨌든 아무 것도 깨뜨리지 않아야 하기 때문에 릴리스하기 위해 주 버전이 필요하지 않습니다.

제때 공개하는 것을 방해할 수 있는 것:

• 예상치 못한 문제를 발견한 경우(개발 방식을 알고 있음)
• 우리가 어딘가를 엉망으로 만들어서 내부 구글 앱을 망가뜨린다면
• 최우선 과제가 발생하여 초점을 전환해야 하는 경우
• 의존하는 새로운 것 중 하나가 차단되거나 지연된 경우(런타임 i18n은 팀의 다른 구성원이 작업 중인 주요 내부 변경 사항에 따라 다름)

• 3년 동안 PascalPrecht의 번역 라이브러리를 사용해 온 AngularJS 수석 개발자입니다.
• 나를 흥분시켰다. 앵귤러2 신인. 순진하게 탐색 https://angular.io/guide/i18n
• i18n을 내 전문 프로젝트에 성공적으로 통합
• 100+kb xlf 파일로 포팅하는 모든 프론트 엔드 하드 코딩 레이블을 어지럽히는 데 하루 종일 소비
• ng 서비스 내에서 원시 레이블을 번역해야 하는 경우
• 구글에서 찾아보면 여기 있어
• Angular 6 시대 이전에는 해결책이 없다는 것을 알아내십시오.
• 나 rn
  

@Macadoshis 지금은 내 polyfill 라이브러리를 사용할 수 있습니다. https://github.com/ngx-translate/i18n-polyfill

@Macadoshis 는 이제 alpha.46 이후로 우리가 겪었던 일을 상상해 보세요! ;)

i18n-polyfill @ocombe 를 알려주셔서 감사합니다. 하지만 번역 키의 비동기 로드를 지원하므로 ngx-translate 를 사용하겠습니다.
TRANSLATIONS 제공자를 위한 i18n-polyfill 팩토리는 부트스트랩 이전에 알려진 고정 로케일의 동기화 원시 로딩만 지원하는 것 같습니다.

// 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 당신이 작성한 폴리필이 출시되는 것에 얼마나 가깝습니까? 우리가 알고 있거나 준비해야 할 것이 있습니까? 또한 버전 6에서 릴리스되는 i18n의 기능 목록과 i18n의 테스트가 어떻게 진행되고 있는지 알려주시겠습니까?

지금은 코드 번역 서비스에 대한 자세한 내용이 없습니다. 아마도 다음 주에 작업할 것입니다(저는 마운틴 뷰로 여행 중입니다). 내가 아는 것은 백그라운드에서 클로저 라이브러리의 goog.getMsg 와 유사할 것이라는 것뿐입니다(현재 Google에서 내부적으로 사용하고 있기 때문에): https://github.com/google/closure-library /blob/db9bc1a2e71d4b6ee8f57eebe37eb0c6494e9d7e/closure/goog/base.js#L2379 -L2387 이는 내 폴리필과도 유사합니다.

v6에서 우리는 런타임 i18n을 출시할 것입니다: 모든 로케일에 대한 하나의 번들, 런타임에 해석된 번역, 시간이 있다면 코드 번역일 수도 있습니다(그렇지 않으면 곧 나올 것입니다). 전투 테스트를 거치지 않은 새 렌더러(ng-ivy라고 함)를 사용해야 하기 때문에 이 모든 것이 플래그 뒤에 있습니다.

고마워! @ocombe ... 정말 좋은 것 같습니다!
템플릿 번역을 위한 구문에 주요 변경 사항이 있습니까? 지금 프로젝트에 번역을 추가할 생각입니다. 하지만 몇 주 안에 완전히 다시 하고 싶지는 않습니다.

아니요, 템플릿 구문은 동일합니다.

좋은 소식을 알려준 @ocombe 에게 감사드립니다. 이것은 매우 유망합니다. v6과 함께 출시될 ng-ivy 렌더러에서 어떤 종류의 프로덕션 준비를 기대할 수 있습니까? 나는 그것이 전투 테스트를 거치지 않을 것이라는 것을 이해하지만 여전히 프로덕션 사용을 위해 준비되고 거의 최신 버전의 모든 주요 브라우저에서 작동합니다. 맞습니까?

여기에서 진행 상황을 확인할 수 있습니다. https://github.com/angular/angular/issues/21706
모든 것이 v6에 대해 준비될 것이라고 생각하지 않습니다. 플래그 아래에 있기 때문에 v6 릴리스 후에도 계속 진행할 것입니다(브레이킹 체인지 또는 그 밖의 것은 아님)
솔직히 그 모든 것들이 무엇인지 잘 모르겠습니다 :D
나는 cli의 hello world 앱이 이미 작동하고 있다는 것을 알고 있습니다.
새 렌더러의 최적화에서 이점을 얻으려면 이러한 것들 중 일부가 필요하다고 생각하지만 모든 것을 확인하지 않고도 작동할 수 있습니다.
즉, 생산 준비가 되지 않았으므로 아직 제품에 베팅하지 마십시오. 내부 Google 앱에서는 테스트되지 않으며 문제를 수정하기 위해 몇 가지 주요 변경 작업을 수행해야 할 수 있습니다. 새 렌더러를 사용하는 것은 사용자의 재량에 따라 위험을 감수해야 합니다.

v6-beta4에 이 중 하나가 있습니까?

아니요. 이 로드맵 을 확인하십시오. 이 기능은 i18n 런타임에 의해 차단됩니다.

업데이트 @ocombe ?

런타임 i18n의 첫 번째 PR이 기능을 테스트하는 데 사용할 Hello World 데모 앱과 함께 마스터에 병합되었습니다. 런타임에 작동하며 아직 서비스가 없는 경우에도 이론적으로 코드 번역을 지원합니다.
지금은 매우 최소한의 지원(정적 문자열)이며 새로운 기능을 추가하는 작업을 하고 있습니다(다음 주에 추출 작업을 수행한 다음 자리 표시자와 변수가 있는 동적 문자열).
그 후 코드 번역 서비스를 해드립니다.
새 기능이 완료되면 마스터에 병합되므로 새 전공을 기다릴 필요가 없습니다.

@ocombe i heart i18n 기능은 이미 v4.3에 있어야 합니다!! 너무 많은 릴리스가 있지만 i18n에는 아무것도 없습니다. Angular 팀 관리자가 더 많은 작업/개발자를 할당할 수 있나요? 혼자 또는 두 명의 개발자가 빠르게 진행할 수 없다는 것을 이해할 수 있습니다. 이 i 18n 기능은 Angular가 비즈니스 앱/대형 앱으로 가장 빠르게 빌드되는 필수 기능입니다. 이 두 가지 기능은 대형 앱에서 가장 중요하다고 생각하지 않습니까? 감사 해요

@ocombe 에게 할 수 있는 말은 그가 이 기능에 쏟는 모든 노력에 대해 감사하다는 말뿐입니다. 더 이상 개발자가 없다면 그가 요청하지 않았기 때문이 아니라고 확신합니다. 그냥 놔두세요. 출시되면 후회하지 않을 거에요.

참고로...

json 파일에 저장된 문자열에 대한 지원을 포함하여 원래 Aurelia와 함께 사용하도록 개발된 문자열 가져오기 및 내보내기를 위한 대체 도구가 있습니다. Webpack에서 json 를 직접 가져올 수 있으므로 매우 편리합니다. ts 파일에 추가하여 코드에서 해당 문자열에 쉽게 액세스할 수 있습니다.

이 도구는 Angular 템플릿과도 작동하며 다른 편리한 기능이 많이 있습니다. 원하는 경우 사용하거나 Angular 도구를 개선하기 위해 자유롭게 아이디어를 빌릴 수 있습니다. 이를 기반으로 하는 Webpack 로더도 있습니다. 문서의 링크를 참조하세요.

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

우리는 더 간단한 문제가 있고 앞으로 나올 기능(또는 @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 서비스를 사용할 수 있습니다.

이 스레드가 얼마 동안 열려 있다는 것을 알았습니다. HTML과 구성 요소 코드 텍스트를 모두 밀접하게 처리하는 간단한 방법으로 Angular에서 다국어 사이트를 개발하는 데 대한 주요 관심을 보여줍니다.
ocombe 모든 구독자에게 알림 메시지를 보내는 것을 잊지 마세요. 2018년 5월이 코앞인 것으로 알고 있습니다. 그리고 여러분의 친절한 기여에 감사드립니다!

@ocombe 이 런타임 서비스를 사용하려면 Ivy를 사용해야 합니까 아니면 이전 엔진에서도 작동합니까?

담쟁이덩굴만 가능하며 아직 미완성이라 사용불가

@ocombe 의 모든 노력에 감사드립니다!

이 새로운 기능을 얼마나 빨리 사용할 수 있는지에 대해 말씀해 주시겠습니까?

Ivy는 현재 시험판 상태에서 컴파일러 플래그를 사용하여 Angular 6에서 활성화할 수 있습니다. 이 새로운 18n 기능을 현재 Ivy 시험판을 사용하여 사용할 수 있습니까?

아직까지는 아니지만, 나는 좋은 진전을 이루고 있습니다(지금 이 일에 대해 풀타임으로 일하고 있습니다). 마스터에서 테스트할 수 있게 되면 여기에 업데이트를 게시하겠습니다.

@ocombe 정말 감사 합니다! 당신의 노력으로 많은 사람들이 혜택을 받고 있습니다. 우리 모두는 그것을 크게 감사합니다!

@ocombe ts의 정적 번역은 아직 계획 중입니까? typescript 변환으로 컴파일 타임 표현식 교체를 의미합니다.
그렇지 않은 경우 사용자 지정 ts 변환을 추출하지 않고 ng build 파이프라인에 연결할 수 있습니까?

@TinyMan 이 무슨 말인지 잘 모르겠습니다. 빌드 시간에 번역을 병합할 수 있다는 뜻인가요(지금처럼), 아니면 ts 코드에서 번역을 사용할 수 있다는 뜻인가요(우리가 이미 가지고 있는 템플릿 번역 제외)?

@ocombe 내 말은 ts에서 번역을 사용할 수 있지만 서비스나 DI/런타임 번역을 통해서는 사용할 수 없다는 뜻입니다. 컴파일 타임 번역을 의미하지만 typescript용입니다. 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 !"),
}

그리고 이것은 (in fr)과 같이 변환됩니다.

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 를 쓸 수 있어야 한다는 것입니다. 그리고 문자열 보간을 위해 ICU와 보간만 수행하는 보간 방법을 사용할 수 있습니다(템플릿 문자열은 이미 번역되었을 것입니다).

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 여기에도 감사 인사를 전하고 싶습니다. 나는 당신이 이 일을 하고 있는 것에 대해 매우 감사하게 생각합니다. 이 작업은 제 일에 엄청나게 도움이 될 것입니다. 한 가지 질문: 텍스트를 찾을 때 올바른 문자열을 얻기 위해 런타임에 xlf를 참조하는 한 세트의 번들 파일만 만드는 AOT 컴파일을 수행하는 방법이 있습니까, 아니면 방법이 있습니까?

따라서 본질적으로 언어당 1개의 xlf 파일과 5개 또는 6개의 번들 파일이 필요합니다. 현재 10개 언어와 AOT 컴파일이 있는 경우 50개 이상의 파일이 있습니다. 언어당 번들 파일 세트...

나는 그런 노력이나 복잡성을 모르지만 1 세트의 파일 만 있으면 컴파일이 있으면 좋을 것입니다.

예, 그것이 우리가 ivy, 런타임 i18n으로 할 일입니다.
앱을 한 번 번들하고 런타임에 번역을 로드합니다(번역을 지연 로드할 수 있음).

@그렇구나 . 이다. 믿을 수없는.

믿을 수 없을 정도로 행복합니다. 감사 해요!

외부 템플릿을 번역할 수 없는 i18n 기능은 나에게 완전히 쓸모가 없습니다.

@ocombe 안녕하세요 올리비에!
업데이트가 있습니까?

감사 해요!

완료되면 Angular 7(2018년 9월/10월)로 예정된 Ivy가 완료될 때까지 기다려야 하므로 문제가 되지 않습니다.

Angular 7에서는 이 문제가 2년 된 LOL이 됩니다.
어쨌든 Ivy는 이 새로운 기능을 가장 지연시킨 것이었습니다...

@ocombe , 듣기 좋습니다. 우리는 현재 순전히 이러한 이유로 처음부터 롤링한 레거시 i18n 서비스를 사용하고 있습니다. JS에서 할 수 없다는 것은 우리를 위해 몇 가지 간단한 일을 하는 것을 극도로 어렵게 만듭니다.

• 동적 구성 요소
• 일부 현지화된 텍스트를 제공해야 하는 타사 서비스와 통합
• 동적 확인 모달 표시
• 우리 API는 types 오류를 반환합니다. 우리의 맥락에서 우리는 이러한 오류를 동적으로 지역화해야 하며 템플릿 기반 접근 방식은 복잡합니다.
• Angular 팀이 제안한 대로 TitleService 를 사용하고 싶지만 현지화된 텍스트를 제공할 방법이 없습니다!

Angular 팀이 현재 이것을 어떻게 처리하는지 궁금합니다...

안녕하세요 @vincentjames501 ,
우리 회사에서도 지금 하고 있는 것과 똑같이 하려고 했지만 너무 번거로워서 이 스레드에서 이전에 언급한 i18n-polyfill 을 사용하게 되었고 지금까지 잘 작동하고 있습니다.
우리가 가진 유일한 단점은 앱 번들의 크기입니다. 우리는 세 개의 번역 파일을 가지고 있고 각 번들은 그 안에 그것들을 모두 포함하고 있습니다(사용하는 번역만으로 번들을 생성하는 방법을 찾지 못했습니다). 그러나 이 모든 것은 Ivy가 출시되면 해결되기를 바라는 성가신 일입니다.
건배,

번역 맵을 포함하고 각 언어의 environment.ts 파일에 다시 내보냈습니다. 문제 없이 작동하고 모든 번들에 포함되어 있지 않으며 외부 라이브러리가 필요하지 않습니다. 내가 가진 유일한 문제는 evey 사이트가 다르기 때문에 모든 언어에 대해 동일한 서비스 작업자를 가질 수 없으며 누군가 언어를 전환하면 내 사이트에서 그가 이미 푸시 알림에 등록되었는지 여부를 알 수 없다는 것입니다...

@ocombe Angular 6에 대한 소식이 있습니까?

위에서 설명한 것처럼 Angular v6에는 없습니다. v7용으로 예정되어 있는 Ivy에 의존하고 있습니다.

@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 파일에 등록할 수 있으며 템플릿 외부에서 사용할 수 있도록 프로그래밍 방식으로 번역된 메시지를 가져올 수 있습니다.

API가 경로에서도 작동하기를 바랍니다! 예를 들어

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

이 기능이 출시된다면 현재의 i18n API와 큰 변화가 없을까요? 지금 i18n으로 프로젝트를 시작하는 것이 좋습니다. 아니면 Angular 7이 출시될 때 새로운 i18n API를 기다려야 합니까?

업데이트 언제 런타임 및 동적 번역 지원을 받을 수 있습니까?

런타임 번역이 완료되고 병합되지만(ivy로) 컴파일러 측이 아직 완료되지 않았습니다.
나는 지금 ICU 표현을 연구하고 있습니다.
아직 동적 번역(서비스) 코딩을 시작하지 않았지만 아마도 ICU 표현식 후에 할 다음 작업일 것입니다.

@vincentjames501 ICU 표현식과 함께 i18n-polyfill을 사용할 수 있나요? 구현 방법에 대한 솔루션이 없습니다.

@ocombe , 런타임과 동적 번역의 차이점을 명확히 해주실 수 있습니까?

아마도 공식적인 명칭은 없지만 내가 보는 방식은 다음과 같습니다.

• 런타임: 번역은 런타임에 해결됩니다. 즉, 현재와 같이 빌드 중에는 해결되지 않습니다. 모든 유형의 번역(템플릿 또는 코드)에 적용됩니다.
• 동적이란 런타임 시 번역할 내용만 알고 빌드 시 수행할 수 없음을 의미합니다. 주로 서비스를 사용하여 "코드 내" 번역에 적용됩니다. ICU 표현식이 변수에 의존한다는 점에서 동적이라고 생각할 수 있지만 케이스 수가 유한하기 때문에 빌드 시 가능한 모든 변환을 여전히 계산할 수 있습니다.

우리가 개발 중인 현재 프로젝트에 i18n 지원을 추가하는 것을 연기했지만 릴리스에 가까워지고 있습니다. 이것이 Angular 7에서 최종적인 것인지 알 수 있을까요? 아니면 번역을 추가하는 다른 방법을 고려해야 합니까?

@andrei-tatar i18n은 Angular 2 이후로 완벽하게 작동합니다. 유일한 단점:

• 코드 번역 없음(이번 문제) -> 필요한 경우 i18n-polyfill을 사용하세요.
• AOT(권장)를 빌드할 경우 언어별로 앱을 별도로 빌드해야 합니다.
• 각 앱은 별도로 빌드되기 때문에 언어를 전환할 때 페이지를 새로고침해야 합니다.

마지막 두 지점에 대해서는 @ngx-translate를 대신 사용할 수 있습니다. 그러나 Angular의 내장 i18n과 다르게 작동하므로 이후 업데이트에는 시간이 걸릴 수 있습니다. 폴리필의 경우 업데이트는 아마도 주요 변경 사항이 없을 것입니다.

@오콤베

Angular i18n 기능을 사용하여 조건부 연산자를 처리하는 방법

2018년 8월 24일 금요일, 16:56 David Walther Birk Lauridsen, <
[email protected]>은 다음과 같이 썼습니다.

@shobhit12345 https://github.com/shobhit12345

우리는 ngSwitch를 사용하여 모든 메시지를 템플릿화하므로 i18n-tag를 다음에 첨부할 수 있습니다.
개별적으로.

숨다보여 주다역사

우리는 누락된 동적 번역을 해결하기 위해 이 방법을 많이 사용합니다.
조금만 생각해보면 놀라운 양의 텍스트를 다음으로 표현할 수 있습니다.
템플릿에서 이런 식으로. 일반적인 패턴은 메시지 배열을 갖는 것입니다.
그런 다음 이것을 ngFor 및 ngSwitch와 함께 사용하여 메시지를 템플릿화합니다.
이 같은:

TS

메시지 = [ '이것은 첫 번째 메시지입니다', '이것은 두 번째 메시지입니다' ]

HTML


i18n="@@firstMesssage">첫 번째 메시지입니다.
i18n="@@secondMesssage">두 번째 메시지입니다.

다소 장황하지만 작동합니다!

—
당신이 언급되었기 때문에 이것을 받는 것입니다.
이 이메일에 직접 답장하고 GitHub에서 확인하세요.
https://github.com/angular/angular/issues/11405#issuecomment-415731284 ,
또는 스레드 음소거
https://github.com/notifications/unsubscribe-auth/AGwM6jcWIpwtGxhkH1fwnVXNagRxmMnoks5uT-LxgaJpZM4J2pkr
.

완료되면 Angular 7(2018년 9월/10월)로 예정된 Ivy가 완료될 때까지 기다려야 하므로 문제가 되지 않습니다.

벌써 10월입니다. 10월 말까지 새로운 기능이 제공될 것이라고 생각하십니까?

https://is-angular-ivy-ready.firebaseapp.com 에 따르면 @lizzymendivil Ivy는 65% 완료되었으며 30일 만에 완료될 것 같지 않습니다.

예, 아이비는 한 달 안에 끝나지 않을 것입니다.

@ocombe 당신만 업데이트를 게시할 수 있도록 잠글 수 있습니다. "언제 완료되었나요?" 코멘트

@ocombe Ivy는 이제 대략 94%가 된 것 같습니다. 연말쯤에는 준비가 될 것 같습니까?

나는 그렇게 생각하지 않는다. 기능이 준비되어 있고 버그가 없는 것(= 사용 가능함)은 매우 다릅니다. 현재 대부분 수정 작업을 하고 있습니다.

@ocombe i18n이 Angular 8보다 먼저 나왔다는 사실을 믿을 수 있습니까?

나는 그렇게 생각하지 않는다. 기능이 준비되어 있고 버그가 없는 것(= 사용 가능함)은 매우 다릅니다. 현재 대부분 수정 작업을 하고 있습니다.

네, 신속한 답변 감사합니다. 감사합니다.

Angular에서 I18N 지원을 위해 "템플릿 번역"과 함께 "코드 번역" 부분을 사용할 수 있을 것으로 예상해야 할 때(연말에 마지막 몇 가지 의견 참조) 업데이트 @ocombe 가 있습니까? 우리는 Angular I18n 기능과 함께 ngx-translate-polyfill을 클럽화할 것이라고 생각했지만 https://github.com/biesbjerg/ngx-translate-extract CLI를 사용하여 기존 xlf 파일을 병합하는 데 xlf 지원을 사용할 수 없는 것 같습니다. .

감사 해요 !

@아베콩게

ngSwitch를 사용하여 모든 메시지를 템플릿화하므로 i18n 태그를 개별적으로 첨부할 수 있습니다.
다소 장황하지만 작동합니다!

제안 감사합니다! 가장 이해하기 쉬운 것 같습니다. 제 질문은 배열에 10개 이상과 같이 "많은" 값이 있는 상황에서 이 구현을 계속 사용합니까? 코드가 매우 커질 것 같습니다.

나는 우리가 그 많은 사람들과 함께 있는지 모르지만 왜 그렇지 않습니다. 메시지가 여러 위치에서 사용되는 경우 기본적으로 스위치와 i18n 태그인 작은 i18n 구성 요소를 만듭니다.

데이비드

덴 23. 1월 2019 클. 19.24 skrev Andrew Bissada [email protected] :

@아베콩게

ngSwitch를 사용하여 모든 메시지를 템플릿화하므로 i18n 태그를 개별적으로 첨부할 수 있습니다.
다소 장황하지만 작동합니다!

제안 감사합니다! 가장 이해하기 쉬운 것 같습니다. 제 질문은 배열에 10개 이상과 같이 "많은" 값이 있는 상황에서 이 구현을 계속 사용합니까? 코드가 매우 커질 것 같습니다.

—
당신이 언급되었기 때문에 이것을 받는 것입니다.
이 이메일에 직접 답장하거나 GitHub에서 보거나 스레드를 음소거하세요.

Validator 클래스에서 i18n-polifills를 사용하는 방법. i18n 서비스를 통해 은밀한 유효성 검사기 메시지를 사용할 수 없습니다.

//컴포넷에서
this.crForm= this.fb.group({
사용자 이름: [''],
전자비밀번호: [''],
}, { 검증인: 새로운 AccValidator(this.i18n).validate()}
);

//검증기

import { AbstractControl, ValidationErrors, FormGroup, FormControl } from '@angular/forms';
'@ngx-translate/i18n-polyfill'에서 { I18n } 가져오기;
내보내기 클래스 AccValidator{
생성자(i18n:I18n)
{

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

오류 아래에 점점

RROR 오류: 잡히지 않음(약속 중): TypeError: 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)

@오콤베

.ts 파일에서 const와 함께 i18n-polyfills를 사용하는 방법

내보내기 const 용어 모델= () => [
{
제목: '테스트 데이터',
활성: 사실,
데이터: [

        [
            {
                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, 선택, 의료 {Medical} 치과 {Dental} 의료 및 치과 {Medical & Dental} 치명적 및 치과 {Catastrophic & Dental} 치명적 {Catastrophic} }
{VAR_SELECT, 선택, 의료 {Medical} 치과 {Dental} 의료### 및 치과 {Medical y Dental}
치명적 ### & 치과{Catastrophic y Dental} 치명적 {Catastrophic} }

특수 문자가 있는 ICU 표현식을 사용할 때 변환되지 않습니다.

@ocombe i18n-polyfill을 사용하여 이동 경로를 처리하는 방법은 무엇입니까?

내보내기 const 경로: 경로 = [
{
길: '',
구성 요소: 홈 구성 요소,
데이터: {
제목: '집',
이동 경로: '홈'
}
}
]

@오콤베

.ts 파일에서 const와 함께 i18n-polyfills를 사용하는 방법

내보내기 const 용어 모델= () => [
{
제목: '테스트 데이터',
활성: 사실,
데이터: [

        [
            {
                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({ 값: '이름', id: '이름' }),
}
다음과 같이 구성 요소 생성자에 I18n 폴리필을 주입하십시오.
개인 i18n: I18n
ts 파일에서 번역을 사용할 때 해당 ts 파일을 번역하려면 ngx-extractor 및 xliffmerge를 사용해야 합니다. https://www.npmjs.com/package/ngx-i18nsupport

@ JanneHarju
작동하지 않고 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
  }
}

@ JanneHarju
예, 동일한 구성을 사용하고 있으며 xlf 파일에서 .ts 메시지를 추출할 수 있습니다.

하지만 const는 다른 .ts 파일에 있습니다.

내보내기 const 용어 모델= () => [
{
}

i18n을 const와 함께 사용하려고 할 때 구성 요소에서 가져오고 있는데 값을 추출하지 않습니다.

provider와 같은 const 값을 사용하면 어떻게 될까요?

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

코드가 깨질 수 있지만 포인트를 얻을 수 있습니다.

빵 부스러기를 번역하는 방법

const 경로: 경로 = [
{
경로: './enroll-new.component',
구성 요소: EnrollNewComponent,
데이터: {
이동 경로: '등록'
},
}
]

이 스레드를 i18n-polyfill 또는 기타 문제에 대한 지원 스레드로 사용하는 것을 중단할 수 있습니까? i18n-polyfill에 대한 질문이 있는 경우 해당 저장소에서 문제를 제기하십시오.
@ocombe 이 주제를 잠글 수 있습니까? 거의 모든 중요한 것을 다루어야 합니다.
이 주제에서 언급한 i18n 지원을 출시할 Angular 버전은 무엇입니까?

예, 지금은 잠겨 있습니다.
우리는 옵트인 베타로 v8에서 아이비를 사용할 수 있도록 열심히 노력하고 있습니다. 런타임 i18n은 google 클로저(google이 내부적으로 사용하는 것)와 함께 사용할 수 있으며 이를 통해 디버그할 수 있습니다(매우 큰 변화입니다). 다른 모든 사람들은 i18n으로 아이비를 테스트할 수 있지만 번역을 로드할 수는 없습니다. 앱은 앱을 코딩하는 데 사용된 원래 언어로 실행됩니다.
실제로 번역하는 데 필요한 런타임 서비스는 현재 번역되지 않은 텍스트를 반환합니다. 우리는 모두 기존 코드로 버그를 수정하기 위해 노력하고 있기 때문에 새로운 기능은 릴리스 이후로 제한됩니다. v8이 나오면 작업할 것입니다. 이것이 저의 첫 번째 작업이 되어야 합니다.
새로운 소식이 있으면 업데이트를 추가하고 이 스레드의 잠금을 해제하겠습니다.

우리가 작업하고 있는 새로운 $localize 태그는 프로그래밍 방식으로 사용할 수 있습니다.

예

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

그런 다음 컴파일 타임(또는 런타임)에 대체할 수 있는 Hello {$name}! 에 대한 번역을 제공할 수 있습니다.

이제 사용할 수 있습니다(문서화되지 않은 경우).