Angular 4 更新组件 styleUrls答案

【问题标题】：Angular 4 update component styleUrlsAngular 4 更新组件 styleUrls
【发布时间】：2018-03-12 22:08:24
【问题描述】：

我有一个有两个样式文件的组件...我想根据一些本地化参数在它们之间切换，所以我所做的是

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

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

此时“home.component.style1.css”文件已正确应用到模板上。

但是当我尝试在构造函数中设置变量“cssFiles”时，它根本不起作用

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'];
  }
}

请注意

每次更新本地化时，我都会重新启动应用程序。所以基本上我不希望在运行时更新样式，但我希望能够在每次应用程序启动时设置样式文件
我使用的是最新版本的 Angular，它是 ng-version="4.4.3"

【问题讨论】：

没有模板的组件。

标签： angular typescript angular-components

【解决方案1】：

就像GitHub issue 中讨论的那样，您可以尝试执行以下操作：

@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");
  }
}

【讨论】：