从Angular 2开始的angular.element替代方案

发布时间：2020-12-17 10:15:59 所属栏目：安全来源：网络整理

导读：我有一个Angular 1应用程序,我用过： let css = ".toolbar-background {background-color: #D3300E !important;}";angular.element(document.body).append(angular.element('divstyle' + css + '/style/div')); 我正在将我的应用程序迁移到Angular 2,现在角

我有一个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 2中实现相同的方法,那将会非常有帮助.

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

使用文件

在您的组件中导入文档,如下所示：

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/

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!