我有一个Angular 1应用程序,我用过：
let css = ".toolbar-background {background-color: #D3300E !important;}";
angular.element(document.body).append(angular.element('<div><style>' + css + '</style></div>'));
我正在将我的应用程序迁移到Angular 2,现在角度对象从Angular 2开始不可用.
如果有人可以建议在Angular 2中实现相同的方法,那将会非常有帮助.
有几种方法可以做到这一点：
使用文件
在您的组件中导入文档,如下所示：
import {DOCUMENT} from '@angular/platform-browser';
将它注入构造函数中,如下所示：
constructor(@Inject(DOCUMENT) private document: any) {
}
并使用它在任何函数中附加这样的数据：
ngOnInit() {
let css = ".toolbar-background {background-color: #D3300E !important;}";
this.document.body.innerHTML.append = this.document.body.innerHTML + "<div><style>" + css + "</style></div>";
}
这是工作的plunker：
https://embed.plnkr.co/lVRcHNJnxgGsD1iwZJll/
使用ElementRef
在组件中导入ElementRef和ViewChild,如下所示：
import {ViewChild,ElementRef } from '@angular/core';
在你的html中定义你想要追加数据的div,例如：
<div #styleDiv></div>
使用ViewChild访问div上方,如下所示：
@ViewChild('styleDiv') styleDiv:ElementRef;
并执行如下所需的附加：
let css = "h2 {color: green;font-size:14px;}";
let tmp = "<style>" + css + "</style>";
this.styleDiv.nativeElement.insertAdjacentHTML('beforeend',tmp);
这是使用ViewChild和ElementRef的工作plunker：
https://embed.plnkr.co/lVRcHNJnxgGsD1iwZJll/
