구성 요소 내에서 CSS를 변경하십시오.

내 앵글 러 5 앱에서 부트 스트랩 3 로그인 페이지에 고유 한 배경 이미지를 사용하는 아이디어를 가지고 놀고 있습니다. 목표는 index.html 페이지의 body css를 변경하는 것입니다. 단, 로그인 페이지가로드 될 때만 가능합니다.구성 요소 내에서 CSS를 변경하십시오.

이미지를로드 할 수 없어서 생각한 가장 단순한 아이디어로 되돌아갔습니다. 단순히 색상을 설정하고 작동하도록 할 수 있는지 확인하십시오.

:host(.body){ 
    background-color: green; 
}  

.form-control { height:100px}

나는 파일이 .form 제어 CSS를 100 픽셀로 내의 TextInput을 변경 C/B 참조되고있는 것을 알고있다. 그러나 페이지의 본문은 변경되지 않습니다. 나는 (.body) (몸)과 (심지어) 몸을 통과 시키려고 노력했다. host-context() 변형은 작동하지 않습니다.

@Component({ 
    moduleId: module.id, 
    templateUrl: 'login.component.html', 
    host:  {'body':'background-color: green'} 
})

이 너무 간단 보인다, 그러나 저를 회피한다 :

그럼 내가 성공하지,과 같이 구성 요소 내에서이 시도.

감사합니다.

출처

2017-11-28 user441058

특정 구성 요소의 배경색을 변경하는 경우 클래스를 상위 div에 추가하고 거기에 첨부 할 수 있다고 생각하십니까? 이걸 제대로 이해했다면? –

감사합니다. 로그인 페이지가로드 될 때만 사이트 배경을 변경하고 싶습니다. index.html에 대한 CSS를 변경할 수 있지만 특정 페이지가 아닌 전체 앱에 적용됩니다. – user441058

나도 원하는 방식으로 몸 색깔을 바꾸는 직접적인 방법을 볼 수 없다. 나는 무엇이라도 찾을 수 있다면 내가 검색하고 알려주겠다. 솔루션을 찾을 수있는 경우 솔루션을 게시하십시오. –

좋아, 문제가 해결 될 수 있습니다. 응용 프로그램 로그인 구성 요소에서 Renderer2를 사용하십시오. 당신의 init 메소드에서 지금

constructor(public renderer: Renderer2, public elementRef: ElementRef){ }

는 색상을 변경하려면이 작업을 수행

import { Component, OnInit, Renderer2 } from '@angular/core';

다음이 작업을 수행, 생성자에서 초기화하고 아래로 다음 방법의 onInit 배경 이미지 및 색상을 변경하려고 당신의 몸,

ngOnInit(){ 
    let parentElement = this.renderer.selectRootElement('.changeColor'); 
    parentElement.bgColor = "blue"; 
    const el = this.elementRef.nativeElement.cloneNode(true); 
    parentElement.appendChild(el); 
    }

을 당신은 어떤 색상 y로 다시 bgColor가를 변경하려면 다른 구성 요소 시도로 탐색 지금 때, 당신의 몸 태그에서 "changeColor"클래스를 넣어 확인 귀하의 나머지 신청서를 원했습니다.

출처

2017-11-28 07:51:48

구성 요소 내에서 CSS를 변경하십시오.

답변

관련 문제