從Angular 2組件訪問根html標籤

所以問題是，是否可以使用Renderer來調整主Angular 2應用程序組件外的標籤，如標籤？如果是，那麼做這件事的最好方法是什麼？從Angular 2組件訪問根html標籤

讓我給一點背景。我正在嘗試使用Angular 2構建多語言網站，但遇到了一個我找不到解決方案的問題。事情是我使用的HTML標籤的lang屬性來定義該網站在每個時刻用什麼語言，例如：

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

因此，當用戶點擊一個不同的語言，我用NG2更新網站語言翻譯，這是完美的。問題是我需要相應地更新屬性，但是我無法在Angular 2中找到正確的方法（如果甚至可能的話）。現在，我直接觸摸DOM，但這不適用於我，因爲我需要從它抽象出來（我也使用通用，所以我需要服務器端渲染工作）。

現在，該屬性上的應用程序中繼的樣式（我們支持阿拉伯語，這意味着如果lang =「ar」，則更改文本的方向）。我想我可以在我的主要組件或類似的東西上使用一個類，但是使用lang屬性對我來說似乎是正確的方法。有任何想法嗎？

感謝

來源

2017-03-06 Markel Arizaga

可以使用DOCUMENT DI令牌從角進行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); 
    } 
}

來源

2017-06-08 10:12:45

感謝堡壘他回答。我將此標記爲有效答案，但根據您的回答我有另一個問題。這是在Angular應用程序之外訪問DOM的推薦方式嗎？我正在考慮Angular Universal，在推薦的方式下，它最終會自行實現DOCUMENT令牌以啓用服務器端的使用。 –

根據[Angular Universal Readme]（https://github.com/angular/universal-starter#universal-gotchas），只要你不是直接訪問本地元素，它應該在服務器上工作，但我還沒有嘗試過。您總是可以從'angular2-universal''導入{isBrowser，isNode}，並且不要運行需要瀏覽器的部分。這也在文檔中描述。 –

是的，我使用isBrowser之類的東西，但理想情況下，我希望避免在基於環境的情況下進行大量檢查，因爲它在某個時刻很容易失控。基本上是爲服務器端實現DOCUMENT。如果現在沒有一個，我想這是一個實施的問題。再次感謝您的答案。 –

從Angular 2組件訪問根html標籤

回答

相關問題