typescript - angular.element-alternativ fra Angular 2 og fremover

Jeg har en Angular 1-applikasjon hvor jeg brukte:

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

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

Jeg migrerer applikasjonen min til Angular 2, og nå er ikke angular-objektet tilgjengelig fra og med Angular 2.

Det vil være veldig nyttig hvis noen kan foreslå en mulig måte å oppnå det samme i Angular 2.

Svar #1

Det finnes et par måter å gjøre dette på:

BRUKSDOKUMENT

importer Document i komponenten din slik:

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

injiser det i konstruktøren slik:

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

  }

og bruk det til å legge til dataene slik inne i en hvilken som helst funksjon:

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

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

her er den fungerende plunkeren:

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

BRUKE ElementRef

Importer ElementRef og ViewChild i komponenten slik:

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

I HTML-en din definerer du div-en der du vil legge til data slik:

<div #styleDiv></div>

Få tilgang til overliggende div ved å bruke ViewChild slik:

 @ViewChild('styleDiv') styleDiv:ElementRef;

og utfør den nødvendige vedleggsoperasjonen på denne måten:

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

her er den fungerende plunker som bruker ViewChild og ElementRef: https://embed.plnkr.co/lVRcHNJnxgGsD1iwZJll/

Svar #2

du kan bruke ElementRef og legge til CSS.

constructor(myElement: ElementRef) { ... }

Relaterte artikler