Angular 5在组件破坏上删除样式节点

Question

当组件被破坏时，我是否弄错了这个问题，还是样式节点应该从文档的头部消失？https://github.com/juleskremer/angular/commit/385ED90AC373C0347EA88FE3868685405C01BA1A58

如果我将封装设置为"无"该组件添加的样式节点，即使被破坏了？

当组件被破坏时，是否有一种删除样式节点的方法？

Answer 1

Angular不支持从文档中删除样式节点。但是我为创建/从文档中删除样式节点。

服务： style.service.ts

import { Injectable, Inject, Optional } from '@angular/core';
import { STYLE_HOST } from 'app/common';
@Injectable()
export class StyleService {
  private stylesMap: Map<any, Node> = new Map();
  constructor(
    @Optional() @Inject(STYLE_HOST) private host: Node
  ) {
    if (host === null) {
      this.host = document.head;
    }
  }
  createStyleNode(content: string): Node {
    const styleEl = document.createElement('style');
    styleEl.textContent = content;
    return styleEl;
  }
  has(key: any): boolean {
    return this.stylesMap.has(key);
  }
  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);
    }
  }
}

组件： login.component.ts

您需要在同一文件夹中创建一个CSS文件，并需要它。

export class LoginComponent implements OnDestroy {
  constructor(
    private styleService: StyleService
  ) {
    styleService.addStyle('loginStyle', require('./style.css'));
  }
  ngOnDestroy(): void {
    this.styleService.removeStyle('loginStyle');
  }
}

Answer 2

这是我对此的看法。

认为有1000个列表元素，然后单击时，您正在转移到每个列表元素的详细信息组件。因此，如果您删除了销毁详细信息组件的样式，如果您再次重定向到其他列表元素，该怎么办。每次加载CSS都是一个负担。也许出于这个原因，它没有被删除。