web-dev-qa-db-fra.com

alternative angulaire.élément de Angular 2 et plus

J'ai une application Angular 1 où j'ai utilisé:

let css = ".toolbar-background {background-color: #D3300E !important;}";

angular.element(document.body).append(angular.element('<div><style>' + css + '</style></div>'));

Je migre mon application vers Angular 2 et, maintenant, l'objet angular n'est plus disponible à partir de Angular 2.

Ce sera vraiment utile si quelqu'un peut suggérer un moyen possible d'obtenir le même résultat en Angular 2.

angulartypescriptdom
6
Suneet Jain

Il y a deux façons de le faire:

USING DOCUMENT

importer le document dans votre composant comme ceci:

import {DOCUMENT} from '@angular/platform-browser';

l'injecter dans le constructeur comme ceci:

constructor(@Inject(DOCUMENT) private document: any) {

  }

et utilisez-le pour ajouter les données comme ceci dans n'importe quelle fonction:

ngOnInit() {
    let css = ".toolbar-background {background-color: #D3300E !important;}";

    this.document.body.innerHTML.append = this.document.body.innerHTML + "<div><style>" + css + "</style></div>";
  }

voici le plunker de travail:

https://embed.plnkr.co/lVRcHNJnxgGsD1iwZJll/

USING ElementRef

Importez ElementRef et ViewChild dans un composant comme ceci:

import {ViewChild, ElementRef } from '@angular/core';

Dans votre code html, définissez la div dans laquelle vous souhaitez ajouter des données comme:

<div #styleDiv></div>

Accédez au-dessus de div en utilisant ViewChild comme ceci:

 @ViewChild('styleDiv') styleDiv:ElementRef;

et effectuez l'ajout requis comme ceci:

let css = "h2 {color: green;font-size:14px;}";
let tmp = "<style>" + css + "</style>";
this.styleDiv.nativeElement.insertAdjacentHTML('beforeend',tmp);

voici le logiciel de travail utilisant ViewChild et ElementRef: https://embed.plnkr.co/lVRcHNJnxgGsD1iwZJll/

5
Fahad Nisar

vous pouvez utiliser ElementRef et ajouter css.

constructeur (myElement: ElementRef) {...}

2
pm86