ng2简单指令实现多主题功能（个人思路）

多主题指的是我们的web程序可供用户选择相应的样式，纯前端实现与传统的结合后台实现不同，用户所选即所见，也不用刷新页面。结合ng2做特性模块的多主题，一开始是想要实现不同主题按需加载的，苦于找不到好的方案，可能能力太水了。所以现在的方案就是按需加载模块的时候，需要加载其对应的全部样式，然后通过简单的指令和服务来动态设置组件的class。
我以sass为例，简单地列出模块对应的样式文件

主题文件

可以看到，可以将主题大致分为一个公共的，还有就是不同色彩的文件，因为一般一些定位布局什么的都不会修改，只有配色才会变化。这里分为多个文件是便于维护。

在组件类中可以引入多个对应的样式文件

引入多个样式

这样一来在加载这个模块组件的时候就会相应地加载这些样式文件了。

下面可以写一个主题服务类，主要用来设置主题、修改class的

主题服务头部

这里先定义一些数据类型接口，没啥。。就是方便智能提示（用的vscode），需要一个主题的key，因为纯前端的话主题标识是扔到localstorage里，所以需要一个key；还有一个指令实例的数组容器，主要用于后面循环操作以及注销实例用。

看看服务的主要函数

服务主要函数

也就是几个重要的函数，注释上面有说明。这里说一下为什么要有销毁功能，因为这里的服务是全局的、单例的。所以实例数组会随着用户的操作慢慢增加元素，为了防止内存溢出，就可以结合指令的生命钩子来注销实例啦！

看完服务再看看简单的指令，指令在这里主要是为了获取其被应用到的dom元素

主题指令

很简单，主要就是添加此实例到服务中，初始化、销毁指令等等，都是调用服务中的方法。这里主要说一下ng2中的 Rederer、ElementRef。 Rederer官方说法是可以修改dom元素，而不会局限于浏览器平台上。ElementRef则能获取当前应用指令的dom元素。这样一结合就可以开心地修改dom啦！

模板上的应用

应用指令 样式

可以看到，直接在想要切换样式的元素上应用指令。需要注意的是，必须要有对应主题类，不然是没有任何样式的。

但是这种方法有一定的局限性，就是得按照规范来，比如得提前统一好主题类的名字、然后需要在改变样式的dom上多加一层来确保不会影响原有的class。至于优化，后面发现问题再弄吧 —… — |||