css - 根据路由在组件中加载不同的样式

Question

我正在尝试根据 URL 参数在组件中加载 css 样式。基本上，用户将加载页面，如 SOME_URL/{screenSize}/{type}。这将始终加载相同的组件，但具有不同的 CSS 样式。我已经在使用路由器并设置了参数 - 如何动态加载 CSS 文件？这可能吗？

这是一些代码 - 基本上目标不是加载示例中定义的静态 CSS 文件，而是加载类似 screen.component.21-5.a.css

    @Component({
      selector: 'app-screen',
      templateUrl: './screen.component.html',
      styleUrls: ['./screen.component.css']
    })
    export class ScreenComponent implements OnInit {


      public screenType = 'a';
      public screenSize = '21-5';

      ngOnInit() {}

      constructor(private mediaService: MediaService, private route: ActivatedRoute) {


          this.parameterSubscription = route.params.subscribe((params) => {
            if (params.size) {
              this.screenSize = params.size;
            }
            if (params.type) {
              this.screenType = params.type;
            }
          });
      }
      ...
   }

Answer 1

你不能那样做，因为 Angular 要求样式声明是静态可分析的。这是为 AOT 编译完成的。当您运行 ng build --prod 时，您的所有模板和样式都会被编译为 JavaScript，并且这些样式会提前导入。因此，如果您可以使用一些条件重新加载样式，则该代码将不再是静态可分析的(screenSize 变量只能在运行时知道，所以我们应该在提前构建时导入哪种样式？) ，从而导致无法进行AOT编译。(不，没有办法编译两种样式然后在运行时导入它们 - 这意味着我们可以理解函数将产生什么输出，这实际上是不可能的 - 参见 halting problem )

但是您可以(并且应该)使用 ngClass 根据屏幕大小在 css 类之间切换。