从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';

将它注入构造函数中,如下所示:

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/