Question

我正在开发一个Angular 5项目，我有一个组件，里面有一个图表。我想以图表为主题。为此，我创建了2个scss文件，并将它们添加到组件的样式URL中。但是，我希望主题是通过切换样式表运行时。是否可以将2个scss文件导出为2个css样式表，以便我可以热加载/交换它们？

Answer 1

如果您想在运行时切换scss或import { Component, Inject } from '@angular/core'; import { DOCUMENT } from '@angular/platform-browser'; @Component({ selector: 'app-', template: "<head><link id="theme" rel="stylesheet" href="red.css"></head>" }) export class AppComponent implements OnInit { constructor (@Inject(DOCUMENT) private document) { } ngOnInit() { this.document.getElementById('theme').setAttribute('href', 'blue.css'); } }，可以使用这样的javascript文档

<link rel="stylesheet" href="/theme/css/vendor-rtl.min.css" *ngIf="(locale$ | async)?.isRtl else ltrVendor">
<link rel="stylesheet" href="/theme/css/common-rtl.min.css" *ngIf="(locale$ | async)?.isRtl else ltrCommon">
<link rel="stylesheet" href="/theme/css/application-rtl.min.css" *ngIf="(locale$ | async)?.isRtl else ltrApplication">

<ng-template #ltrVendor>
  <link rel="stylesheet" href="/theme/css/vendor.min.css">
</ng-template>
<ng-template #ltrCommon>
  <link rel="stylesheet" href="/theme/css/common.min.css">
</ng-template>
<ng-template #ltrApplication>
  <link rel="stylesheet" href="/theme/css/application.min.css">
</ng-template>

<router-outlet></router-outlet>

或

False

在Angular中单独从组件导出样式URL

1 个答案: