Question

例如，我有以下sass文件：

style.scss

vector<complex<double>> V;
V.resize(n);

ltr.scss

vector<complex<double>>

rtl.scss

return V;

以及更改我的网站语言的服务，例如：
service.ts：

body{
  direction:$direction;
  text-align:$start-direction;
}

如何在$direction: ltr; $start-direction: left; @import './style.scss';和$direction: rtl; $start-direction: right; @import './style.scss';文件之间动态切换？
有任何想法或更好的解决方案吗？

Answer 1

您可以使用ngClass。您可以将条件放在ngClass上，并将不同的类用于不同的条件。如果您需要更多详细信息，请执行以下操作： https://angular.io/api/common/NgClass

Answer 2

我遇到了类似问题，但使用了常规的CSS文件。我当时处于需要根据用户公司颜色为整个项目动态更改整个CSS主题的情况。解决方案是使用帮助程序类，该类将检查用户是否来自公司1，然后拉出company1.css，如果来自公司2，则来自公司2。css。像这样：

colorThemeHelper.ts

 const FACEBOOK = 'facebook';
 const TWITTER  = 'twitter';

 export class ThemeLoader {
     static setCss(): void {
        let url = '';
        let user: User = LocalData.getUser();

        switch (user.company) {
            case FACEBOOK:
                url = 'assets/css/facebook.css';
                break;
            case TWITTER:
                url = 'assets/css/twitter.css';
                break;
            default:
                url = '';
        }
        (<HTMLLinkElement>document.getElementById('ELEMENT_PLACEHOLDER_CSS')).href=url;
      }
  }

重要的是，在index.html文件中，您必须具有一些ID（在我的情况下为“ ELEMENT_PLACEHOLDER_CSS”）的链接标记，您可以获取并将上述方法生成的url放入该元素的href属性。

在用户登录后，在ngOnInit方法的某些仪表板组件中，我将调用setCss函数！我知道这不是最优雅的解决方案，并且您需要具有单独的css（或您的情况下为sass）文件，但是在我的情况下它可以工作。希望这会有所帮助！

在angular的两个sass文件之间切换

2 个答案: