是否可以在 Angular 2 中动态更改全局样式表？答案

【问题标题】：Is it possible to dynamically change global stylesheets in Angular 2?是否可以在 Angular 2 中动态更改全局样式表？
【发布时间】：2016-10-10 09:24:53
【问题描述】：

是否可以动态更改全局样式表？

编辑：目的是允许用户选择他喜欢的样式。

在 Angular 1 中，我能够在 head 标签周围包裹一个控制器并在其中使用绑定。

以下示例（简化代码）：

index.html

<!DOCTYPE html>
<html ng-app="app" ng-controller="AppController">
<head>
    <title>Title</title>
    <link rel="stylesheet" ng-href="styles/{{current}}"/>
</head>
...

应用控制器

app.controller('AppController', ['$scope', function ($scope ) {
    $scope.current = dynamicValue;
}]);

这在 Angular 2 中可行吗？

【问题讨论】：

你试过了吗？发生了什么？
你想通过动态改变链接标签来完成什么？可能有不同的方法来实现相同的功能。 :)

标签： javascript angularjs angular

【解决方案1】：

我最终使用了 Igor 提到的 DOCUMENT 令牌here。

从那里，我能够将 href 换成样式。

HTML：

<head>
   <link id="theme" rel="stylesheet" href="red.css">
</head>

TS：

import { Component, Inject } from '@angular/core';
import { DOCUMENT } from '@angular/platform-browser';

@Component({})
export class MyClass {
    constructor (@Inject(DOCUMENT) private document) { }

    ngOnInit() {
      this.document.getElementById('theme').setAttribute('href', 'blue.css');
    }
}

【讨论】：

你的 repo 中 blue.css 的路径是什么（你把它放在哪里）？
样式已添加到头部但样式未应用
对我来说效果很好，ngOnInit() { setTimeout(function(this){ this.document.getElementById('theme').setAttribute('href', 'assets/style-2.css' ) }, 3000);我添加了一个超时，以便您可以看到正在应用的样式

【解决方案2】：

不，您不能在 Angular 应用程序之外使用任何绑定。 Angular 应用程序只能位于<body> 或内部。因此没有办法使这项工作。

您可以查看Title service 的实现，了解如何访问<head> 中的元素，或者只使用普通的JS/TS 来强制修改它。

【讨论】：

【解决方案3】：

试试这个：在你的根组件模板中包含一个可变样式表链接。

@Component({
  selector: 'app',
  template: `
    <link rel="stylesheet" href="styles/{{ current }}">
    ...`
})
export class AppComponent {
    current = 'site1.css';
}

【讨论】：