2017-10-10 1 views
0

전체 페이지의 배경색을 각도로 변경하려고합니다. 프레임 워크없이 작업 할 때 body 태그 또는 html 태그를 사용합니다. 그리고 최선의 방법을 찾을 수는 없습니다. 앞으로 몇 년 동안 응용 프로그램을 구축 할 것이므로 가능한 한 프레임 워크 내에 있어야합니다.전체 페이지 배경색을 각도로 변경하는 방법

+1

Angular CLI를 사용하는 경우 styles.css에 html 및 body 태그를 추가 할 수 있습니다. –

+0

"app.component.css"에 넣습니다. 'html { background-color : black; }' 아무런 효과없이 –

+0

app.component.css, style.css.Or에 없으면 (구성 요소) 다음과 같이 사용해야합니다. :: ng-deep – Vega

답변

3

모든 구성 요소에서이 작업을 수행 할 수 있습니다. 예를 들어 :

export class AppComponent implements AfterViewInit { 
     constructor(private elementRef: ElementRef){ 

     } 
     ngAfterViewInit(){ 
     this.elementRef.nativeElement.ownerDocument.body.style.backgroundColor = 'yourColor'; 
     } 
    } 

this.elementRef.nativeElement.ownerDocument를 사용함으로써, 당신은 어떤 각도 규칙을 위반하지 않고 window.document 개체에 액세스 할 수 있습니다. 물론 window.document을 사용하여 document 개체에 직접 액세스 할 수는 있지만 ElementRef을 통해 액세스하는 것이 더 좋을 것이라고 생각합니다.

+0

시도했지만 시도하지 않았습니다. 작동, 오류 없음, 효과가 없습니다. 여기에서 무엇인가를 변경해야합니까? this.elementRef.nativeElement.ownerDocument.style.backgroundColor'? –

+1

제 잘못, 사실 ngOnInit 라이프 사이클 후크에서 dom에 액세스 할 수 없습니다. 나는 내 대답을 바로 잡았습니다 – asmmahmud

+0

저는 실제로 당신의 대답에 더 만족했으며, 분명히 제 코드에 들어가는 사람이었습니다.하지만 앤더슨이 바로 그 자리에서 간단히 답해 주었기 때문에 나는 그를 인정해야 할 것입니다. 나를 도와주는 일이 평판을 얻는만큼 당신을 만족시킬 것입니다. –

5

angular-cli를 사용하는 경우.
전역 스타일 파일이 있어야합니다.

  • SRC
    • 응용 프로그램
    • 자산
    • 환경
    • index.html을
    • 을 styles.css

거기에 스타일을 넣을 수 있어야합니다. 전체 페이지를 적용하려면 html { background-color: black; }.

+0

감사합니다, 내가 asmmahmud의 대답을 기다릴 것입니다, 그럼 내가 답변 중 하나를 확인합니다. –

관련 문제