Angular 8 - Как удалить элемент <style>из <head>после уничтожения компонента - PullRequest
Новая
       28

Angular 8 - Как удалить элемент <style>из <head>после уничтожения компонента

0 голосов
/ 08 мая 2020

Angular - Как удалить элемент после уничтожения компонента

Я следую приведенному выше решению, но не могу правильно отобразить css.

Он возвращает мне [объектный модуль] , а не содержимое css, когда я добавляю:

component.ts 

this.styleService.addStyle('usergrid1css', require('../../../assets/css/clr.css'));

html

<style>[object module]</style>

Кто-нибудь может мне в этом помочь?

Заранее спасибо!

chrome devtools image 

code below extracted from the url above

import { Injectable } from '@angular/core';

@Injectable()
export class StyleService {
  private stylesMap: Map<any, Node> = new Map();
  private host: Node;

  constructor() {
    this.host = document.head;
  }

  private createStyleNode(content: string): Node {
    console.log('style');
    const styleEl = document.createElement('style');
    styleEl.textContent = content;
    return styleEl;
  }

  addStyle(key: any, style: string): void {
    const styleEl = this.createStyleNode(style);
    this.stylesMap.set(key, styleEl);
    this.host.appendChild(styleEl);
  }

  removeStyle(key: any): void {
    const styleEl = this.stylesMap.get(key);
    if (styleEl) {
      this.stylesMap.delete(key);
      this.host.removeChild(styleEl);
    }
  }
}


**component.ts**


import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms';
import { concat, merge, Observable, of, Subject } from 'rxjs';
import { catchError, debounceTime, distinctUntilChanged, switchMap, tap, map } from 'rxjs/operators';

import { StyleService } from '../../services/style.service';

declare function require(name: string): any;
@Component({
  selector: 'app-user',
  templateUrl: './user.component.html',
  styleUrls: ['./user.component.css']
})
export class UserComponent implements OnInit {
 constructor(private fb: FormBuilder,
    private styleService: StyleService) {
  }
ngOnInit() {

    this.styleService.addStyle('usergrid1css', require('./clr.css'));

}

1 Ответ

0 голосов
/ 09 мая 2020

Решение, предложенное моим ответом, основано на этой angular службе, полученной в репозитории материалов на github. angular .io

Я также оставляю пример, работающий в stackblitz использования указанной услуги

услуги 

import { Injectable } from '@angular/core';

/**
 * Class for managing stylesheets. Stylesheets are loaded into named slots so that they can be
 * removed or changed later.
 */
@Injectable()
export class StyleManagerService {

  /**
   * Set the stylesheet with the specified key.
   */
  setStyle(key: string, href: string) {
    getLinkElementForKey(key).setAttribute('href', href);
  }

  /**
   * Remove the stylesheet with the specified key.
   */
  removeStyle(key: string) {
    const existingLinkElement = getExistingLinkElementByKey(key);
    if (existingLinkElement) {
      document.head.removeChild(existingLinkElement);
    }
  }

}

function getLinkElementForKey(key: string) {
  return getExistingLinkElementByKey(key) || createLinkElementWithKey(key);
}

function getExistingLinkElementByKey(key: string) {
  return document.head.querySelector(`link[rel="stylesheet"].${getClassNameForKey(key)}`);
}

function createLinkElementWithKey(key: string) {
  const linkEl = document.createElement('link');
  linkEl.setAttribute('rel', 'stylesheet');
  linkEl.classList.add(getClassNameForKey(key));
  document.head.appendChild(linkEl);
  return linkEl;
}

function getClassNameForKey(key: string) {
  return `style-manager-${key}`;
}

компонент 

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
})
export class ExampleComponent implements OnDestroy  {
  themes = [
    'deeppurple-amber',
    'indigo-pink',
    'pink-bluegrey',
    'purple-green'
  ];

  constructor(public _styleManager: StyleManagerService) {
  }

  ngOnDestroy() {
    removeTheme();
  }

  selectTheme(themeName: string) {
    this._styleManager.setStyle('theme', `assets/${themeName}.css`);
  }

  removeTheme() {
    this._styleManager.removeStyle('theme');
  }
}
...