Question

我需要为我在angular2中开发的Web应用程序提供两个主题（红色，蓝色）。当我更改主题时，所有组件都应该反映它？

在angular2中应用主题的最佳做法是什么？

Answer 1

您可以使用@ angular / platform-browser中的DOCUMENT token来访问所有DOM元素，然后更改样式表源。下面是一个简单的例子。

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

@Component({})
export class SomeComponent {

    constructor (@Inject(DOCUMENT) private document) { }

    Light() {
        this.document.getElementById('theme').setAttribute('href', 'light.css');
    }
}

Answer 2

我假设有两个按钮：一个用于红色，另一个用于蓝色。主题将根据用户的按钮单击进行更改。

分配HTML中演示的按钮点击事件：

<button (click)="Red()">Red</button>
<button (click)="Blue()">Blue</button>

假设您想在div部分中更改主题，

<div id="div1">
---
</div>

在Angular 2中，您必须为css动态分配类。

Red(){
document.getElementById('div1').className= 'redClass'; //notice id of div is div1
}

Blue(){
document.getElementById('div1').className='blueClass';
}

现在终于，在css中根据类改变样式：

div.redClass {
  background-color :red;
}
div.blueClass {
  background-color :blue;
}

如何在angular2中应用主题？

2 个答案: