我应该如何使用 Angular 为不同设备引用不同文件？

Question

这是我的项目在18.2.8版本的结构。 在此输入图片描述

如果我用电脑查看的话，这是结构： 在此输入图片描述

我想要做的是根据您登录的内容显示一个 css 文件。但我并不完全确定如何在 Angular 项目中引用 CSS 文件。我不想使用媒体查询，因为每当我将窗口做得很小时，我都不希望我的应用程序像手机一样显示在电脑上，所以我尝试使用 userAgent 来检查它是否正在被查看使用手机或台式机。

现在我很困惑，因为当我将代码编译到网站中时，我的 styles.css 与其他两个 CSS 文件结合在一起，就像我要执行 @include 一样。

该网站还创建了另一个“副本？”的desktop.css（当我查看桌面时）并将其放在与styles.css相同的级别，因此如果我有多个名称相同的变量，它会首先使用此文件，这很好。但是，如果我在 mobile.css 中有一个变量，而不是在desktop.css 中，它会显示在两者中，因为它会合并在 styles.css 中。

我该怎么办？

对于某些上下文，这是我的 AppComponent 中的内容： 这按其应有的方式工作。

constructor() {
  const userAgent = navigator.userAgent.toLowerCase();

  if (/mobile/i.test(userAgent)) {
    this.device = "mobile";
  } else {
    this.device = "desktop";
  }

  this.loadStylesheet();
}

loadStylesheet() {
  const head = document.getElementsByTagName('head')[0];

  // Create a new link element
  const linkElement = document.createElement('link');
  linkElement.rel = 'stylesheet';
  linkElement.type = 'text/css';
  linkElement.href = this.device === 'mobile' 
    ? 'mobile.css' 
    : 'desktop.css';

  // Append the link element to the head
  head.appendChild(linkElement);
}

我尝试在我的

angular.json

中添加这样的css文件：

"styles": [
    "src/styles.css",
    "src/app/styles/desktop.css",
    "src/app/styles/mobile.css"
]

我希望看到的文件保持原样，并且仅当我在电脑或手机上时才显示。但实际上发生的情况就是我之前描述的，它会自动创建一个 css 文件，并将所有 css 合并到 styles.css 中。

另外，一开始我只是删除了 styles.css 并将其从 angular.json 中删除，但它还是被创建了。无论如何，我想保留该文件，但我认为值得指出。

Answer 1

默认情况下，Angular 将

styles

中的所有条目合并到一个包中，同时保留它们的顺序。

您可以通过使用复杂的配置值来控制该行为。 根据您的示例，以下配置应创建单独的

desktop.css

和

mobile.css

捆绑包，而不自动将它们包含在页面上，从而允许您使用

AppComponent

中的自定义逻辑添加它们

"styles": [
    "src/styles.css",
    {
      "input": "src/app/styles/desktop.css",
      // By default, angular is injecting each file .
      // Set to false to exclude the bundle from injection, since you are handling it yourself
      "inject": false,
      "bundleName": "desktop"
    },
    {
      "input": "src/app/styles/mobile.css",
      "inject": false,
      "bundleName": "mobile"
    }
]

有关更多详细信息，请查看 Angular 文档

希望有帮助:)