Question

我正在尝试实现一种在SASS项目中的两个angular样式表之间切换的方法。我使用here中描述的技术创建样式表。当我使用ng build进行构建时，它将在输出目录styles.js中同时创建contrast.js和dist/myProject。到目前为止一切都很好。

在项目的根组件中，我有一个绑定到按钮的(click)事件的函数：

onThemeChange = () => {
  const script: HTMLScriptElement = document.createElement('script');
  script.type = 'text/javascript';
  const defaultScript = document.querySelector('script[src="styles.js"]') as HTMLScriptElement;
  let source: string;
  if (null != defaultScript) {
    defaultScript.remove();
    source = 'dist/theme-test/contrast.js';
  } else {
    document.querySelector('script[src="dist/theme-test/contrast.js"]').remove();
    source = 'styles.js';
  }
  document.body.appendChild(script);
  script.src = source;
}

单击按钮会产生预期的结果-节点

<script type="text/javascript" src="styles.js"></script>

被替换为

<script type="text/javascript" src="dist/theme-test/contrast.js"></script>

，并请求新的样式表脚本。当请求返回时，主题将更改。下次单击几乎可以按预期工作-在DOM中正确替换了对比度脚本节点，并发送了请求，但是请求返回时主题没有改变。

我已经观察到，对styles.js的第二个请求始终以状态304返回，但是对contrast.js的请求无论其状态为200还是304都按预期方式工作，因此似乎不是问题，但谁知道...

任何帮助将不胜感激。

Answer 1

使用

private async void Load_Click(object sender, RoutedEventArgs e)
{
    text.Text = "";
    await LoadText();
    text.Text = text.Text + newValue;
    text.Text = text.Text + "Ashokkumar Viswanathan";
}

当您ng build

时在Angular.json文件中

并使用css文件而不是js文件

如何切换样式表脚本并还原原始脚本？

1 个答案: