(Angular) 如何禁用组件模板中的“链接”标签？

Question

To explain the current situation with an example, I imported "1.css" using "link" tag in "index.html" for global use,

  <link href="assets/css/1.css" rel="stylesheet" type="text/css" />

Among the three components a,b,c, I wont to use the "1.css" in the template of the "c" component.

So how can I disable the css?

Answer 1

$('link[href="assets/css/1.css"]').each(function() { this.remove(); });

You need to put this inside jquery onload fucntion

Answer 2

I solve this problem like this.

ngOnInit(): void{
this.disableCSS("1.css", true);
}

...

  disableCSS(cssFileName: string){
    for (let i = 0; i<= document.styleSheets.length; i++ ){
      if( typeof document.styleSheets[i] !== 'undefined' ){
        if( typeof document.styleSheets[i].href !== "undefined" && document.styleSheets[i].href !== null){
          if( document.styleSheets[i].href.includes( cssFileName ) ){
            document.styleSheets[i].disabled = true;
          } 
        }
      }
    }
  }

and re disable CSS like thie:

ngOnDestroy(){
this.disableCSS("board.css", false);
}