javascript - 如何在 Angular 中添加动态外部脚本？

Question

我有两个 angular 门户，它们都有不同的样式，所以我想在加载组件上添加样式，样式已添加但未加载。请帮我实现

这是我的代码

import { Component, OnInit, Inject } from "@angular/core";
import { DOCUMENT } from "@angular/common";

export interface type {
  fileName: string;
  fileType: string;
}

const externalScripts: type[] = [
  { fileName: "src/assets/blk-design-system.css", fileType: "css" },
  { fileName: "src/assets/nucleo-icons.css", fileType: "css" }
];

@Component({
  selector: "app-layout",
  templateUrl: "./layout.component.html",
  styleUrls: ["./layout.component.css"]
})
export class LayoutComponent implements OnInit {
  constructor(@Inject(DOCUMENT) private document: Document) {}

  ngOnInit() {
    this.loadScripts();
  }

  loadScripts() {
    externalScripts.forEach(element => {
      // this.scriptLoader.loadJsCssFiles(element.fileName, element.fileType);
      this.loadStyle(element.fileName);
    });
  }

  loadStyle(styleName: string) {
    const head = this.document.getElementsByTagName("head")[0];
    const style = this.document.createElement("link");
    style.id = "client-theme";
    style.rel = "stylesheet";
    style.href = `${styleName}`;

    head.appendChild(style);
  }
}

---

这是输出

感谢任何解决方案!

Answer 1

为了在您的组件之外使用任何样式，您需要将其导入到 src/styles.css 文件中。

@import "assets/blk-design-system.css";

如果您发现任何已经导入的文件，例如 bootstrap，只需在其下方添加导入行即可。

为了防止组件内的封装:

@Component({
    selector: "app-layout",
    templateUrl: "./layout.component.html",
    styleUrls: [
    "./layout.component.css",
    //include external css here
    ],
    encapsulation: ViewEncapsulation.None, 
})

并在 styleUrls 中包含外部 css