Question

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

以下是一些代码 - 基本上目标不是加载示例中定义的静态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; } }); } ... }

的内容

01-15 12:11:48.512 9508-9508/app.mma.introsliderproject E/AndroidRuntime: FATAL EXCEPTION: main
                                                                          Process: app.mma.introsliderproject, PID: 9508
                                                                          java.lang.NullPointerException: Attempt to invoke virtual method 'android.content.Context android.support.v4.app.FragmentActivity.getApplicationContext()' on a null object reference
                                                                              at app.mma.PokerInfo.lastWorldNews.LastWorldNewsFragment$4.onResponse(LastWorldNewsFragment.java:122)
                                                                              at app.mma.PokerInfo.lastWorldNews.LastWorldNewsFragment$4.onResponse(LastWorldNewsFragment.java:117)

Answer 1

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

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

Answer 2

您可以使用ngClass

你的HTML中的

<div class="gradient "  [ngClass]="{'class-21-5': screenSize ==='21-5', 'class-a': screenType==='a'}">

...
</div>

如果需要，可以将不同的类放在不同的文件中并将其导入到组件中。

@Component({
      selector: 'app-screen',
      templateUrl: './screen.component.html',
      styleUrls: ['./screen.component.css', './my-other-style.css']
    })

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

2 个答案: