Angular 2 之后的 angular.element 替代方案

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 对象在 Angular 2 之后不可用。

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

Answer 1

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

使用文档

像这样在您的组件中导入文档:

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/