如何从组件Angular 2中的styleUrl中删除样式

Question

这是我的组成部分

@Component({
selector: 'app-pages-landing',
templateUrl: './pages-landing.component.html',
styleUrls:['../../assets/pages-landing/main.css'],
encapsulation: ViewEncapsulation.None,
})

我通过styles导入此组件的文件css将其生成样式到head元素  

当我更换组件时。该样式仍然保留，并且上一个组件的下一个组件加载样式。我如何将其删除。我希望每个组件都有各自的样式

Answer 1

忘记了封装，它不能帮助您满足要求。取而代之的是使用共享服务，我们称其为样式服务，它将在文档头中添加/删除样式节点。

您无需在@ Component 装饰器的 stylesUrls 中添加CSS样式，而是使用 ngOnInit 上的样式服务来添加它们>函数，它将样式节点添加到文档头。在 ngOnDestroy 函数上销毁了组件之后，您将使用style-service删除样式，这将从文档头中删除样式节点。

足够了，让我们看一些代码：

style.service.ts

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 {
    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);
    }
  }
}

PageLandingComponent

import { Component, OnInit, OnDestroy} from '@angular/core';

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

declare const require: any;

@Component({
  selector: 'app-pages-landing',
  templateUrl: './pages-landing.component.html',
  styleUrls:[],//remove CSS from here
})
export class PageLandingComponent implements OnInit, OnDestroy {

  constructor(private styleService: StyleService) { }

  ngOnInit() {
    this.styleService.addStyle('main', require('../../assets/pages-landing/main.css'));
  }

  ngOnDestroy() {
    this.styleService.removeStyle('main');
  }

}