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

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

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

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>

...

AppController

app.controller('AppController', ['$scope', function ($scope ) {

$scope.current = dynamicValue;

}]);

在Angular 2中有可能吗?

回答:

我最终使用了Igor在这里提到的DOCUMENT令牌。

从那里,我可以将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');

}

}

以上是 是否可以在Angular 2中动态更改全局样式表? 的全部内容, 来源链接: utcz.com/qa/399407.html

回到顶部