Question

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

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”

Answer 1

你可以用一点点hacky方式做到：创建自己的装饰器。以下是如何执行此操作的示例：https://stackoverflow.com/a/39755547/6053654

Answer 2

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

Angular 4更新组件styleUrls

2 个答案: