Question

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

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

在Angular 1中，我能够在头标记周围包裹一个控制器，并在那里使用绑定。

以下示例（简化代码）：

的index.html

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

AppController的

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

这在Angular 2中是否可行？

Answer 1

我最终使用了DOCUMENT令牌，因为Igor提到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');
    }
}

Answer 2

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

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

Answer 3

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

mysql

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

3 个答案: