我有一个 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
对象在 Angular 2 之后不可用。
如果有人能提出在 Angular 2 中实现相同目标的可能方法,那将非常有帮助。
最佳答案
有几种方法可以做到这一点:
使用文档
像这样在您的组件中导入文档:
import {DOCUMENT} from '@angular/platform-browser';
像这样在构造函数中注入(inject)它:
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 的工作插件: https://embed.plnkr.co/lVRcHNJnxgGsD1iwZJll/
关于Angular 2 之后的 angular.element 替代方案,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45165417/