angular.element 替代从 Angular 2 开始

Question

我有一个 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对象不可用。

如果有人可以提出一种在 Angular 2 中实现相同目标的可能方法，那将非常有帮助。

Answer 1

有几种方法可以做到这一点：

使用文档

在组件中导入文档，如下所示：

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/

Answer 2

您可以使用ElementRef并附加css。

constructor(myElement： ElementRef( { ... }