구성 요소의 스타일 값 설정 각도 2

Question

작업은 경로에 따라 배경색을 변경하는 것입니다. UpcomingComponent에 대해 다른 색상을 표시해야하고 다른 색상에 대해서는 배경색이 동일하게 유지되어야합니다.

배경색을 동적으로 설정하기 위해 STYLES for/deep/.classname에 값을 설정하려고합니다.

다음은 지원되지 않습니다 styles 또는 styleUrls에 바인딩 코드

@Component({ 
    selector: 'app-upcoming', 
    templateUrl: './upcoming.component.html', 
    // styleUrls: ['./upcoming.component.css'], 

    styles: [` 
    /deep/ .root { 
    background-color: color; 
    }`] 
}) 

export class UpcomingComponent implements OnInit { 

    color: string; 


    ngOnInit() { 
    this.bodyBackgroundImage(); 
    } 



    bodyBackgroundImage() { 
    if (window.location.pathname === '/upcoming'){ 
     console.log("Here i am"); 
     this.color = 'purple'; 
    } 

    } 

} 

Answer 1

나는 AppComponent에서 Route를 사용했다. 나를 도와 주신 @ Günter Zöchbauer에게 감사드립니다.

import { Component } from '@angular/core'; 
import {Router , ActivatedRoute,NavigationEnd} from '@angular/router'; 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 

}) 
export class AppComponent { 


    constructorprivate router:Router,private activatedRoute:ActivatedRoute) { 

    router.events.subscribe(event => { 
     if (event instanceof NavigationEnd) { 
     if (event.url === '/upcoming') { 
      document.body.style.background = 'grey'; 
     }else { 
      document.body.style.background = 'blue'; 
     } 
     } 
    }); 
    } 
} 

Answer 2

입니다. 스타일을 지정하려는 요소에 [class.xxx]="...", [ngClass]="...", [style.xxx]="...", [ngStyle]="..." 종류의 바인딩을 대신 사용하십시오.