Typescript Angular 5为组件添加动态css。

Question

我有一个非常特殊的问题。我在服务器端使用AngularTS和C#，在客户端使用Typescript，我想在我们的应用程序中添加一种可能性，即客户可以在文本框中添加css样式或添加文件位置（外部）。

我想在我们的应用程序中增加一种可能性，即客户可以在文本框中添加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

在Typescript中，你可以使用这个动态加载CSSrequire('css/stylesheet.css')