Entonces, la pregunta es, ¿es posible usar Renderer para modificar etiquetas que están fuera del componente principal de la aplicación Angular 2, como la etiqueta? En caso afirmativo, ¿cuál es la mejor manera de hacer esto?
Permítanme dar un poco de antecedentes. Estoy tratando de construir un sitio multilenguaje con Angular 2 y encontré un problema para el que no pude encontrar una solución. El caso es que estoy usando el atributo lang en la etiqueta html para definir que idioma tiene el sitio en cada momento, por ejemplo:
<html lang="en"> // When we have English locale activeEntonces, cuando el usuario hace clic en un idioma diferente, actualizo el idioma del sitio usando ng2-translate, que funciona perfectamente. El problema es que necesito actualizar la propiedad en consecuencia, pero no puedo encontrar la forma correcta de hacerlo en Angular 2 (si es posible). Por ahora, estoy tocando directamente el DOM, pero esto no funcionará para mí porque necesito abstraerme de él (también estoy usando Universal, por lo que necesito que funcione la representación del lado del servidor).
Por ahora, el estilo de la aplicación se basa en esta propiedad (soportamos el árabe y esto significa cambiar la dirección del texto si lang="ar"). Supongo que podría usar una clase en mi componente principal o algo así, pero usar la propiedad lang me parece el enfoque correcto. ¿Algunas ideas?
Gracias
Puede usar el token DOCUMENT DI de Angular para realizar operaciones Dom:
import { Inject } from '@angular/core'; import { TranslateService } from '@ngx-translate/core'; import { DOCUMENT } from '@angular/common'; export class AppComponent { constructor(private translate: TranslateService, @Inject(DOCUMENT) private _document: any) { translate.onLangChange.map(x => x.lang) .subscribe(lang => this._document.documentElement.lang = lang); } }