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>";
  }

这是工作的掠夺者：

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。

构造函数（myElement：ElementRef）{...}

Angular 2以后的angular.element替代

2 个答案: