Czy treść tekstową elementu można odczytać w Angular bez czytania z DOM?

Question

Potrzebuję być w stanie używać przetłumaczonych ciągów w kodzie w mojej aplikacji Angular, ale z narzędziami i18n jeszcze nie do tego zadania, zaimplementowałem nieco hackowatą wersję, która wykorzystuje istniejące możliwości i18n Angulara, z intencją stopniowego moje rozwiązanie dla native Angular, ponieważ jego możliwości i18n doganiają moje potrzeby (powinny być 5.x release, kciuki).

Zasadniczo mam TranslationDirective który czyta tekst z DOM, i emituje zdarzenia, gdy zmienia się tekst:

@Directive({ 
    selector: '[myAppTranslation]' 
}) 
export class TranslationDirective implements AfterViewChecked, OnChanges { 
    /** 
    * dependencies takes an array of the values needed to calculate the output translation 
    * we use this for change detection, to minimize the DOM interaction to only when it is necessary 
    */ 
    @Input() dependencies: any[]; 
    isDirty = true; 
    @Input() messageKey: string; 
    message: string; 
    @Output() messageUpdated = new EventEmitter<TranslationEvent>(); 

    constructor(public el: ElementRef) {} 

    /** 
    * sets the translated message and triggers the TranslationEvent 
    */ 
    setMessage() { 
    const message = (this.el.nativeElement.textContent || '').trim(); 
    const oldMessage = (this.message || ''); 
    if (oldMessage !== message) { 
     this.message = message; 
     this.isDirty = false; 
     this.triggerTranslationEvent(); 
    } 
    } 

    ngOnChanges() { 
    this.isDirty = true; 
    } 

    ngAfterViewChecked() { 
    if (this.isDirty) { 
     this.setMessage(); 
    } 
    } 

    /** 
    * triggers the messageUpdated EventEmitter with the TranslationEvent 
    */ 
    triggerTranslationEvent() { 
    // need to delay a tick so Angular doesn't throw an ExpressionChangedAfterItHasBeenCheckedError 
    setTimeout(() => { 
     const event = new TranslationEvent(this.messageKey, this.message); 
     this.messageUpdated.emit(event); 
    }); 
    } 
} 

export class TranslationEvent { 
    constructor(public messageKey: string, public message: string) {} 
} 

który przyzwyczaja się tak:

<span 
    myAppTranslation 
    i18n 
    [dependencies]="[today]" 
    [messageKey]="todaysDateKey" 
    (messageUpdated)="setTodaysDateTranslation($event)" 
> 
    Today is {{today | date:'short'}} 
</span> 

Ponieważ ciągi być przetłumaczył wszystkie rezydujące w szablonach, narzędzie Xi18n Angulara odczytuje je w porządku, a kompilator Angular zastąpi je przetłumaczonymi ciągami.

To jest funkcjonalne, ale nie świetne. Podejrzewam, że istnieje błąd związany z wyczekiwaniem na wyczucie czasu, który po prostu mnie nie zamanifestował. Istnieje nieefektywny i powolny cykl pisania do DOM-read-from-DOM, który byłby naprawdę miły do ​​wyeliminowania.

Chciałbym być w stanie wyeliminować jedno źródło problemów, omijając DOM, jeśli w ogóle mogę tego uniknąć. Czy Angular ma przechowywaną w pamięci kopię zawartości elementu, która jest dostępna bez przechodzenia przez DOM? Jeśli to możliwe, czy mogę całkowicie uniknąć pisania elementu tłumaczenia do DOM?

Answer 1

Wygląda na to, że duża część złożoności polega na tym, że chcesz wspierać tekst dynamiczny - tekst może się zmieniać w czasie wykonywania. Nie sądzę, że trzeba to zrobić, bo tekst i18n musi być statyczna, tak aby:

1. To mogą być pozyskiwane w czasie kompilacji.

2. Można to przetłumaczyć z góry, a wszystkie tłumaczenia są przechowywane w późniejszym czasie kompilacji.

Twój przykład "Dzisiaj jest ..." jest doskonałym przykładem nieprzetłumaczalnego tekstu. :-) Powinieneś to zmienić, aby po prostu "Today is" sam był fragmentem tekstu, a następnie data wyświetlana z bieżącym ustawieniem narodowym poza zasięgiem.