Angular 2コンポーネントからルートHTMLタグにアクセスする

レンダラーを使用して、タグのような主要なAngular 2 appコンポーネントの外にあるタグを微調整できますか？はいの場合は、これを行う最善の方法は何ですか？Angular 2コンポーネントからルートHTMLタグにアクセスする

私は少しの背景を教えてください。 Angular 2の多言語サイトを構築しようとしていますが、解決策が見つからない問題が発生しました。

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

ユーザーが別の言語をクリックしたときにだから私はNG2を使用して、サイトの言語を更新しますことは、私には、例えば、サイトは各瞬間に持ってどのような言語を定義するためにhtmlタグにlang属性を使用していますです翻訳が完璧です。問題は、それに応じてプロパティを更新する必要がありますが、角度2でこれを行う正しい方法を見つけることができないということです（可能であれば）。今のところ私はDOMに直接触れていますが、私はそれを抽象化する必要があるため、これは私のためには機能しません（ユニバーサルも使用していますので、サーバ側のレンダリングが必要です）。

今のところ、アプリケーションのスタイリングはこのプロパティを継承しています（アラビア語をサポートしています。これは、lang = "ar"の場合はテキストの方向を変更することを意味します）。私は、私の主なコンポーネントやそのようなものでクラスを使うことができると思うが、langプロパティを使うことは正しいアプローチであるようだ。何か案は？あなたはDOM操作を実行するために角度からDOCUMENT DIトークンを使用することができます

おかげ

出典

2017-03-06 Markel Arizaga

：

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

出典

2017-06-08 10:12:45

おかげ砦と彼は答えます。私はこれを有効な回答としてマークしていますが、あなたの答えに基づいて別の質問があります。これはAngularアプリの外でDOMにアクセスするための推奨された方法ですか？私はAngular Universalについて考えています。推奨される方法の場合、最終的にサーバー側の使用を可能にするDOCUMENTトークンの独自の実装が行われます。 –

[Angular Universal Readme]（https://github.com/angular/universal-starter#universal-gotchas）によると、ネイティブ要素に直接アクセスしていない限りサーバー上で動作するはずですが、まだ試していません。 '{isBrowser、isNode}を 'angular2-universal''からインポートして、ブラウザを必要とする部分を実行しないでください。これはドキュメントにも記載されています。 –

ええ、私はisBrowserのようなものを使っていましたが、理想的には、環境に基づいてチェックを行うのは避けるべきです。基本的には、サーバー側でDOCUMENTを実装することです。今のところない場合は、それを実装することだと思います。回答をもう一度おねがいします。 –

Angular 2コンポーネントからルートHTMLタグにアクセスする

答えて

関連する問題