动态CSS加载

我有两种款式 Style1.scss和Style2.scss

样式1

@import "~bootstrap/dist/css/bootstrap.css";

@import "assets/css/aos/styles.css";
@import "assets/css/aos/aos.css";

@import "assets/css/layout.css";
@import "assets/css/theme-brand-1.css";

一些css文件和一个主题文件

样式2

一些css文件和一个类似样式1的主题文件

主题文件不同

基于url参数，例如

http:\\localhost:4000\login？section=x

我需要加载样式1，对于其他

http:\\localhost:4000\login？section=y

需要加载样式2

方法1-不起作用 组件

this._activatedRoute.queryParams.subscribe(params => {
    this.param1 = params.brand;
    switch(params.brand){
      case 'x': this.cssUrl = '/src/styles1.scss';
      break;
      case 'y': this.cssUrl = '/src/styles2.scss';
      break;
    }
});

Html

<link rel="stylesheet" type="text/html" [href]='sanitizer.bypassSecurityTrustResourceUrl(cssUrl)'>

<div *ngIf="canonicalLink">
  <link  rel="canonical" appMoveToHead [attr.href]="canonicalLink" />
</div>

---

使用指令动态创建规范链接，并在指令加载中将链接移动到头部声明

指令

@Directive({
  selector: '[appMoveToHead]'
})
export class MoveToHeadDirective implements OnDestroy, OnInit {

  constructor(private renderer: Renderer2, 
              private elRef: ElementRef, 
              @Inject(DOCUMENT) private document: Document) {

  }

ngOnInit(): void {
    this.renderer.appendChild(this.document.head, this.elRef.nativeElement);
    this.renderer.removeAttribute(this.elRef.nativeElement, 'appmovetohead');
  }

  ngOnDestroy(): void {
    this.renderer.removeChild(this.document.head, this.elRef.nativeElement);
  }
}

组件。ts

canonicalLink:string;
constructor(private sanitizer: DomSanitizer) { }
//In oninit or when your data is ready, generate canonical link
ngOnInit() {

       let canLink = "styles1.scss"; // set style here based on your condition
       // You can use pipe for sanitizing but lets do it here
       this.canonicalLink = this.sanitizer.bypassSecurityTrustResourceUrl(canLink);

}

component.html

<link rel="stylesheet" type="text/html" [href]='sanitizer.bypassSecurityTrustResourceUrl(cssUrl)'>

<div *ngIf="canonicalLink">
  <link  rel="canonical" appMoveToHead [attr.href]="canonicalLink" />
</div>

---

使用指令动态创建规范链接，并在指令加载中将链接移动到头部声明

指令

@Directive({
  selector: '[appMoveToHead]'
})
export class MoveToHeadDirective implements OnDestroy, OnInit {

  constructor(private renderer: Renderer2, 
              private elRef: ElementRef, 
              @Inject(DOCUMENT) private document: Document) {

  }

ngOnInit(): void {
    this.renderer.appendChild(this.document.head, this.elRef.nativeElement);
    this.renderer.removeAttribute(this.elRef.nativeElement, 'appmovetohead');
  }

  ngOnDestroy(): void {
    this.renderer.removeChild(this.document.head, this.elRef.nativeElement);
  }
}

组件。ts

canonicalLink:string;
constructor(private sanitizer: DomSanitizer) { }
//In oninit or when your data is ready, generate canonical link
ngOnInit() {

       let canLink = "styles1.scss"; // set style here based on your condition
       // You can use pipe for sanitizing but lets do it here
       this.canonicalLink = this.sanitizer.bypassSecurityTrustResourceUrl(canLink);

}

component.html

<link rel="stylesheet" type="text/html" [href]='sanitizer.bypassSecurityTrustResourceUrl(cssUrl)'>

<div *ngIf="canonicalLink">
  <link  rel="canonical" appMoveToHead [attr.href]="canonicalLink" />
</div>

hii@Akshaya，你的问题是什么？你是不是有什么错误？meNo错误似乎没有问题，href得到了正确的值，但没有加载。angular.json中的css正在工作，我添加的任何内容都没有工作@Kushalshah看看这个链接，我认为它和你正在做的是一样的。我已经做了，但没有工作。这个链接只为.css工作（它们需要在“资产/文件夹”中）。我认为唯一的方法是“编译”你的styles1.scss和styles2.scss。你可以尝试的另一件事是在你的.scs前面加上，例如.content1和.content2，并在Angular应用程序中包含这两个.scs，在[ngClass]=“'content1'”或[ngClass]=“content2”后加上trickhii@Akshaya，你的问题是什么？你是不是有什么错误？meNo错误似乎没有问题，href得到了正确的值，但没有加载。angular.json中的css正在工作，我添加的任何内容都没有工作@Kushalshah看看这个链接，我认为它和你正在做的是一样的。我已经做了，但没有工作。这个链接只为.css工作（它们需要在“资产/文件夹”中）。我认为唯一的方法是“编译”你的styles1.scss和styles2.scss。你可以尝试的另一件事是在你的.scs前面加上，例如.content1和.content2，并在Angular应用程序中包含这两个.scs，在[ngClass]=“'content1'”或[ngClass]=“content2”完成这个技巧之后