Angular 4 update component styleUrls

Question

I've a component that has two style files ... I'd like to switch between them according to some localization parameters, So what I've done is

let cssFiles: Array<string> = ['./assets/css/home.component.style1.css'];

@Component({
  selector: 'router-outlet',
  templateUrl: './home.component.html',
  styleUrls : cssFiles
})

At this moment the file "home.component.style1.css" was applied properly on the template.

But when I tried to set the variable "cssFiles" in the constructor, it didn't work at all

let cssFiles: Array<string> = [];

@Component({
  selector: 'router-outlet',
  templateUrl: './home.component.html',
  styleUrls : cssFiles
})

export class HomeComponent implements OnInit {

  constructor(private localize: LocalizeRouterService) {
    if(this.localize.parser.routes[0].path == "opt1")
        cssFiles = ['./assets/css/home.component.style1.css'];
    if(this.localize.parser.routes[0].path == "opt2")
        cssFiles = ['./assets/css/home.component.style2.css'];
  }
}

Please Note

1. Every time the Localization got updated, I restart the Application. So basically I don't want the style to be updated in the run time, but I want to be able to set the style files every time the Application starts
2. I'm using latest version of Angular, it's ng-version="4.4.3"

Answer 1

Like discussed in this GitHub issue you could try and do the following:

@Component({
  selector: 'router-outlet',
  templateUrl: './home.component.html',
  styleUrls : './assets/css/base.ss'
})

export class HomeComponent implements OnInit {

  constructor(private localize: LocalizeRouterService) {
    if(this.localize.parser.routes[0].path == "opt1")
      require("style-loader!./assets/css/home.component.style1.css");
    if(this.localize.parser.routes[0].path == "opt2")
      require("style-loader!./assets/css/home.component.style2.css");
  }
}