刷新角样式答案

【问题标题】：Refresh Angular Style刷新角样式
【发布时间】：2021-02-24 09:12:53
【问题描述】：

我的一个 Angular 组件有两个不同的样式表，用于深色和浅色主题。现在应该根据激活的主题显示这些（通常通过函数设置，在通过计时器简化的示例中）。是否可以只重新加载 Angular 组件的样式，而不完全重新加载组件（以及可能加载的数据）？


let styleTest = ['button.component.light.scss'];

@Component({
    selector: 'button',
    templateUrl: 'button.component.html',
    styleUrls: styleTest,
})
export class ButtonComponent implements OnInit {

    constructor() {
    }

    public ngOnInit() {
        setTimeout(() => {
            styleTest = ['button.component.dark.scss'];
        }, 5000);
    }
}

【问题讨论】：

也许这可以帮助你：stackoverflow.com/a/61874309/8941307。它与角度无关。它使用 css 变量。
很遗憾没有，因为在深色和浅色主题中我从外部 css 源导入，我只能在这个组件中定义它而不是全局
也许你应该分享更多你的代码。你为什么只在你的一个组件中引用外部 css 文件（我假设像 bootstrap.css）？

标签： angular typescript

【解决方案1】：

也许这样的事情可以帮助你：

setTheme(theme) {
    window.localStorage.setItem('theme', JSON.stringify(theme));
    this.theme = theme;
    let link = document.getElementById("css-theme");
    if(link) {
        link['href'] = this.theme.url;
    } else {
        let node = document.createElement('link');
        node.href = this.theme.url; // insert url in between quotes
        node.rel = 'stylesheet';
        node.id = 'css-theme';
        document.getElementsByTagName('head')[0].appendChild(node);
    }
}

https://github.com/angular/angular-cli/issues/4202

【讨论】：