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

Question

Here is my component

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

I import file css of this component by stylesUrls it gen style to head element

When i change component. This style still remain and next component load style from previous component. How i can remove it. I want each component have separate style

Answer 1

Forget about encapsulation in your case, it can't help you with your requirement. Instead, use a shared service, let us call it style-service, which will add/remove the style nodes in the document head.

Instead of adding your CSS styles in the stylesUrls of the @ Component decorator, you will add them by using the style-service on ngOnInit function, which will add the style node to the document head. Once the component gets destroyed on ngOnDestroy function, you will remove the style by using the style-service, which will remove the style node from the document head.

Enough said, lets see some code:

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

}