Typescript Angular 5为组件动态添加css

Question

我有一个非常特别的问题。我在服务器端使用带有C#的AngularTS，在客户端使用Typescript。

我想向我们的应用程序添加一种可能性，即客户可以在文本框中添加css样式或添加文件位置(外部(。

在一个自定义组件中，我想添加来自客户官方网站的html代码。客户应该添加css文件或文本，以便在我们的页面上显示与官方网站内容类似的内容。

不幸的是，我找不到添加css文件的可能性。

@Component({
selector: 'customer-footer',
templateUrl: './customer-footer.component.html'
styleUrls: getCSS()})


export function getCSS(): string [] {
var styles: string[] = [];
styles.push("https://");
return styles;}

这不起作用，因为AOT与静态引用不兼容。

我尝试在样式中添加css内容标记(正文区域(：

<style type="text/css">
{{footerCSS}}</style>

我的最佳结果是将ngStyle中的Object(css(添加到显示中。

<div *ngIf="!fixedBottom"
[innerHtml]="footerHtml"
[ngStyle]="footerCSS"></div>

不幸的是，我找不到像这样转换css代码的方法：

.flatWeatherPlugin {
font-size: inherit;
width: 100%;
}
.flatWeatherPlugin p, .flatWeatherPlugin h2, .flatWeatherPlugin h3, .flatWeatherPlugin ul,  .flatWeatherPlugin li {
padding: 0;
margin: 0;
color: inherit;
}

指向一个功能对象。有人有什么想法或有用的信息吗？

Answer 1

在typescript中，您可以使用它动态加载cssrequire('css/stylesheet.css')