角度:从样式切换器的文件名中获取哈希

Question

我有一个使用 webpack 的 Angular 6 应用程序，在这个应用程序中，我有一个样式表切换器功能，可以交换加载的样式表。问题是这些样式表一旦在生产模式下编译，文件名中包含哈希值(例如my-style.04beaf113c990fa3d2ba.css所以我无法准确加载正确的样式表，因为我不知道正确的哈希。

打字稿中有没有办法检测这个哈希是什么，以便它加载正确的样式表？

我的样式表切换器代码如下：

  import { Directive, OnInit, HostListener } from '@angular/core';
  @Directive({
    selector: '[wuToggleHighContrast]',
    host: {'class' : 'high-contrast-toggle'}
  })
  export class WuHighContrastDirective implements OnInit {
    linkTag: any;
    ngOnInit() {
      let hc = localStorage.getItem('webui_highContrast');
      if (hc) {
        this.enableHC();
      }
    }
    @HostListener('click')
    toggleHighContrast() {
      if (document.getElementById("wuHighContrast")) {
        this.disableHC();
      } else {
        this.enableHC();
      }
    }
    private enableHC() {
      const head = document.head || document.getElementsByTagName('head')[0];
      this.linkTag = document.createElement('link');
      this.linkTag.rel = 'stylesheet';
      this.linkTag.id = 'wuHighContrast';
      this.linkTag.href = 'high-contrast.css';
      head.appendChild(this.linkTag);
      localStorage.setItem('webui_highContrast', 'true');
    }
    private disableHC() {
      document.getElementById("wuHighContrast").outerHTML = "";
      localStorage.removeItem('webui_highContrast');
    }
  }

我仍然想要哈希提供的缓存破坏，但不确定如何正确链接到应用哈希的样式表。

Answer 1

在 Angular CLI 中，它支持在生成生产构建时禁用哈希。 ng build --prod --output-hashing none