Accéder à la balise html racine à partir d'un composant Angular 2

Donc, la question est, est-il possible d'utiliser le Renderer pour modifier les balises qui sont en dehors du principal composant de l'application Angular 2, comme la balise? Si oui, quelle est la meilleure façon de le faire?Accéder à la balise html racine à partir d'un composant Angular 2

Permettez-moi de donner un peu de contexte. J'essaye de construire un site multilangue avec Angular 2 et je suis tombé sur un problème pour lequel je n'ai pas trouvé de solution. La chose est que je suis en utilisant l'attribut lang dans la balise html pour définir quelle langue le site a à chaque instant, par exemple:

<html lang="en"> // When we have English locale active

Ainsi, lorsque l'utilisateur clique sur une autre langue mettre à jour la langue du site en utilisant NG2 -translate, qui fonctionne parfaitement. Le problème est que j'ai besoin de mettre à jour la propriété en conséquence mais je ne peux pas trouver la manière correcte de le faire dans Angular 2 (si c'est même possible). Pour l'instant, je touche directement le DOM mais cela ne marchera pas pour moi parce que je dois en être extrait (j'utilise aussi Universal, j'ai donc besoin du rendu côté serveur pour fonctionner).

Pour le moment, le style des relais d'application sur cette propriété (nous supportons l'arabe et cela signifie changer la direction du texte si lang = "ar"). Je suppose que je pourrais utiliser une classe sur mon composant principal ou quelque chose comme ça, mais l'utilisation de la propriété lang me semble être la bonne approche. Des idées?

Merci

Source

2017-03-06 Markel Arizaga

Vous pouvez utiliser la DOCUMENT DI jeton angulaire pour effectuer des opérations Dom:

import { Inject } from '@angular/core'; 
import { TranslateService } from '@ngx-translate/core'; 
import { DOCUMENT } from '@angular/platform-browser'; 

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

Source

2017-06-08 10:12:45

Merci fort il répondre. Je marque ceci comme réponse valide mais j'ai une autre question basée sur votre réponse. Est-ce la façon recommandée d'accéder au DOM en dehors de l'application Angular? Je pense à Angular Universal, qui dans le cas d'être recommandé, il aura sa propre implémentation du jeton DOCUMENT éventuellement pour activer l'utilisation côté serveur. –

Selon [Readme angulaire universel] (https://github.com/angular/universal-starter#universal-gotchas), il devrait fonctionner sur le serveur tant que vous n'accédez pas directement aux éléments natifs mais je n'ai pas encore essayé . Vous pouvez toujours 'importer {isBrowser, isNode} depuis 'angular2-universal' et ne pas exécuter les parties qui nécessitent le navigateur. Ceci est également décrit dans la documentation. –

Oui, j'ai utilisé des choses comme isBrowser mais idéalement, je voudrais éviter de faire beaucoup de contrôles si basé sur l'environnement, car il sera facilement hors de contrôle à un moment donné. La chose est essentiellement d'avoir une implémentation de DOCUMENT pour le côté serveur. S'il n'y en a pas pour l'instant, je suppose qu'il s'agit d'en implanter un. Merci encore pour les réponses. –

Accéder à la balise html racine à partir d'un composant Angular 2

Répondre

Questions connexes