Typescript Angular 5 动态添加 css 到组件

Question

我有一个非常特殊的问题。 我在服务器端使用 AngularTS 和 C#，在客户端使用 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 与静态引用不兼容。

我尝试在样式标签（Body-Area）中添加 css 内容：

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

我最好的结果是在 ngStyle 中添加一个对象（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

在打字稿中，您可以使用它来动态加载 css require('css/stylesheet.css')