Angular 2 구성 요소에서 루트 HTML 태그 액세스

문제는 렌더러를 사용하여 태그와 같이 기본 Angular 2 app 구성 요소 외부에있는 태그를 조정할 수 있습니까? 그렇다면이 작업을 수행하는 가장 좋은 방법은 무엇입니까?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 토큰을 사용할 수 있습니다

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 태그 액세스

답변

관련 문제